HTML Social Icons

Video 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 Developer Portfolio: HTML, CSS, JavaScript

Robux Tax Calculator HTML CSS

Online HTML Editor | CodeCanvas - Free Web Dev Tool

index.html

styles.css

main.js

Recommended

Web Developer Portfolio: HTML, CSS, JavaScript

Robux Tax Calculator HTML CSS

Online HTML Editor | CodeCanvas - Free Web Dev Tool

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js