mcdonge13 द्वारा एक कोड

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

6 June 2025

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

mcdonge13 द्वारा एक कोड

अनुशंसित

पाठ का एक कोड

मेटेहन द्वारा एक कोड

cleanbug411 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

पाठ का एक कोड

मेटेहन द्वारा एक कोड

cleanbug411 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS