Webleb - Snippets de Código -

Publique Seu Código

Recomendado

22 March 2025

Painel de administração do AdminHub

index.html

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

Recomendado

Minha escola

Big Bang HTML

Painel de administração do AdminHub

index.html

styles.css

main.js

Recomendado

Minha escola

Big Bang HTML

Painel de administração do AdminHub

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js