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

Ecommerce Website Template HTML CSS

HTML CSS Payment Form

CSS Team Members Card

index.html

styles.css

main.js

Recommended

Ecommerce Website Template HTML CSS

HTML CSS Payment Form

CSS Team Members Card

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js