Efecto de botón de burbuja

6150 alex

Abrir en el editor Video Publica tu código

Recomendado

31 May 2025

Un código de alejandrokundrah

21 July 2025

Cuadro de registro de inicio de sesión 3D Diseño HTML CSS

28 February 2025

Formulario de registro/inicio de sesión de animación

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%;
 }
}

Recomendado

Un código de alejandrokundrah

Cuadro de registro de inicio de sesión 3D Diseño HTML CSS

Formulario de registro/inicio de sesión de animación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS