Webleb - Snippet di Codice - Un codice di mcdonge13

HTML

CSS

body {
  font-size: 16px;
  font-family: 'Helvetica', 'Arial', sans-serif;
  text-align: center;
  background-color: #f8faff;
  height: 100vh;
  display:flex ;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.bubble-button {
  font-family: 'Helvetica', 'Arial', sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 100px;
  margin-bottom: 60px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #000000;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(51, 6, 211, 0.5);
}
.bubble-button:focus {
  outline: 0;
}
.bubble-button:before, .bubble-button:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.bubble-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, transparent 20%, #4c00ff 20%, transparent 30%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, transparent 10%, #4c00ff 15%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubble-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, transparent 10%, #4c00ff 15%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%), radial-gradient(circle, #4c00ff 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubble-button:active {
  transform: scale(0.9);
  background-color: #000000;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubble-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.bubble-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
 }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
 }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
 }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
 }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
 }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
 }
}

Un codice di mcdonge13

Consigliato

Un codice di Mete

digitando sullo schermo

Codificare la realtà

HTML

CSS

JS

Consigliato

Un codice di Mete

digitando sullo schermo

Codificare la realtà

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS