HTML Social Icons

Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Webleb</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link href="/css/styles.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="card">
    <a href="https://www.instagram.com/webleb/" class="socialContainer containerOne" target="_blank">
      <i class="fa-brands fa-instagram socialIcon"></i>
    </a>
    <a href="https://discord.com/invite/SnM3Z8VJEA" class="socialContainer containerTwo" target="_blank">
      <i class="fa-brands fa-twitter socialIcon"></i>
    </a>
    <a href="https://discord.com/invite/SnM3Z8VJEA" class="socialContainer containerThree" target="_blank">
      <i class="fa-brands fa-discord socialIcon"></i>
    </a>
    <a href="https://discord.com/invite/SnM3Z8VJEA" class="socialContainer containerFour" target="_blank">
      <i class="fa-brands fa-whatsapp socialIcon"></i>
    </a>
  </div>
</body>
</html>

styles.css

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #0F2027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.card {
  width: fit-content;
  height: fit-content;
  background-color: rgb(238, 238, 238);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  border-radius: 15px;
  gap: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

a{
  text-decoration: none!important;
}
.socialContainer {
  width: 52px;
  height: 52px;
  background: #0F2027;  /* fallback for old browsers */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
  border-radius: 15px;
}
.containerOne:hover {
  background-color: #d62976;
  transition-duration: .3s;
}
.containerTwo:hover {
  background-color: #00acee;
  transition-duration: .3s;
}
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: .3s;
}
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}
.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}
.socialIcon {
  color: white;
}
.socialContainer:hover .socialIcon {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

100% {
    transform: translateY(0);
    opacity: 1;
  }
}

HTML Social Icons

Recommended

Web Designer Portfolio HTML Template

Modern Glassmorphism Login Form in html, css

HTML Login Form Code Snippet

index.html

styles.css

main.js

Recommended

Web Designer Portfolio HTML Template

Modern Glassmorphism Login Form in html, css

HTML Login Form Code Snippet

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js