Webleb - Snippet di Codice -

Video Pubblica il Tuo Codice

Consigliato

18 February 2025

Interfaccia utente di DarkSpace

26 May 2025

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

Consigliato

Greg l'assistente

Interfaccia utente di DarkSpace

Un codice per codice

index.html

styles.css

main.js

Consigliato

Greg l'assistente

Interfaccia utente di DarkSpace

Un codice per codice

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js