CSS Social Icons Toggler

Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>
    Webleb
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <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" />
  <link rel="stylesheet" href="/css/styles.css" />
</head>
<body style="display: flex; justify-content:center ; align-items: center;height: 100vh;overflow: hidden;">
  <div class="buttons">
    <button class="buttons__toggle"><i class="fa fa-share-alt"></i></button>
    <div class="allbtns">
      <a class="button" href="https://www.web-leb.com/code"><i class="fa-brands fa-facebook-f"></i>Facebook</a>
      <a class="button" href="https://www.web-leb.com/code"><i class="fa-brands fa-twitter"></i>Twitter</a>
      <a class="button" href="https://www.web-leb.com/code"><i class="fa-brands fa-instagram"></i>Instagram</a>
      <a class="button" href="https://www.web-leb.com/code"><i class="fa-brands fa-youtube"></i>YouTube</a>
      <a class="button" href="https://www.web-leb.com/code"><i class="fa-brands fa-tiktok"></i>TikTok</a>
      <a class="button" href="https://www.web-leb.com/code"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
    </div>
  </div>
  <script src="/js/main.js"></script>
</body>
</html>

styles.css

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-size: 62.5%;
}
html * {
  box-sizing: inherit;
}
body {
  background: #0F2027;  /* fallback for old browsers */
  display: grid;
  font-family: sans-serif;
  font-size: 1.6rem;
  min-height: 100vh;
  place-content: center;
  position: relative;
}
body::before {
  content: '';
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.buttons {
  position: relative;
  z-index: 1;
}
.buttons--active .allbtns {
  transform: translate(-50%, -50%) rotate(0deg);
}
.buttons--active .button:nth-child(1) {
  transform: translate(-110%, -150%) rotate(0deg);
}
.buttons--active .button:nth-child(2) {
  transform: translate(10%, -150%) rotate(0deg);
}
.buttons--active .button:nth-child(3) {
  transform: translate(65%, -50%) rotate(0deg);
}
.buttons--active .button:nth-child(4) {
  transform: translate(10%, 50%) rotate(0deg);
}
.buttons--active .button:nth-child(5) {
  transform: translate(-110%, 50%) rotate(0deg);
}
.buttons--active .button:nth-child(6) {
  transform: translate(-165%, -50%) rotate(0deg);
}
.buttons__toggle {
  appearance: none;
  align-items: center;
  background-color: #000;
  border: 4px solid #19182b;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0;
  height: 8rem;
  justify-content: center;
  text-decoration: none;
  width: 8rem;
  position: relative;
  z-index: 1;
}
.buttons__toggle:focus, .buttons__toggle--active {
  background-color: #16228b;
}
.buttons__toggle i {
  font-size: 3.2rem;
}
.allbtns {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  transform-origin: center;
  transition: transform 0.75s ease;
  z-index: 0;
}
.button {
  appearance: none;
  align-items: center;
  background-color: #000;
  border: 4px solid #19182b;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0;
  height: 8rem;
  justify-content: center;
  text-decoration: none;
  width: 8rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.z:focus, .button--active {
  background-color: #16228b;
}
.button i {
  font-size: 3.2rem;
}
.button:nth-child(1) {
  transition-delay: calc(1 * 0.075s);
  z-index: calc(6 - 1);
}
.button:nth-child(2) {
  transition-delay: calc(2 * 0.075s);
  z-index: calc(6 - 2);
}
.button:nth-child(3) {
  transition-delay: calc(3 * 0.075s);
  z-index: calc(6 - 3);
}
.button:nth-child(4) {
  transition-delay: calc(4 * 0.075s);
  z-index: calc(6 - 4);
}
.button:nth-child(5) {
  transition-delay: calc(5 * 0.075s);
  z-index: calc(6 - 5);
}
.button:nth-child(6) {
  transition-delay: calc(6 * 0.075s);
  z-index: calc(6 - 6);
}

CSS Social Icons Toggler

Recommended

CSS Heart Animation Code Snippet

Social media buttons Hovering

Animated CSS Button

index.html

styles.css

main.js

Recommended

CSS Heart Animation Code Snippet

Social media buttons Hovering

Animated CSS Button

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js