एचटीएमएल सोशल आइकन्स

अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

21 January 2024

HTML और CSS का उपयोग करके सोशल आइकन

index.html

<!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;
  }
}

एचटीएमएल सोशल आइकन्स

अनुशंसित

3डी सोशल आइकन कोड

सीएसएस सोशल आइकन्स टॉग्लर

HTML और CSS का उपयोग करके सोशल आइकन

index.html

styles.css

main.js

अनुशंसित

3डी सोशल आइकन कोड

सीएसएस सोशल आइकन्स टॉग्लर

HTML और CSS का उपयोग करके सोशल आइकन

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js