Beauty Animated Button

jitesh208
Jan 17, 2026 2
Live Preview

Live Editor

<div class="container d-flex-center">
   <div class="d-flex-center">
           <button class="btn d-flex-center">
                <div class="circle-1 absolute-center"></div>
               <div class="circle-2 absolute-center"></div>
               <div class="circle-3 absolute-center"></div>
           </button>
   </div>
</div>
body {
  background-color: rgb(37, 209, 143);
}

.container{
   width: 100%;
   height: 100vh;
}

.btn {
  position: relative;
  height: 80px;
  width: 80px;
  padding: 0;
  border: none;
  background-color: rgb(231, 252, 255);
  border-radius: 20px;
  box-shadow: 0px 0px 20px 2px rgba(85, 85, 85, 0.4);
  outline: none;
  cursor: pointer;

  transition: 600ms;

  .absolute-center {
    position: absolute;
  }

  .circle-1 {
    transform: scale(0);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(20, 87, 107, 0.9);

    animation: anim1 2.1s cubic-bezier(0.13, 0.86, 0.86, 0.08) 0s infinite;
  }

  .circle-2 {
    transform: scale(0);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(25, 118, 146, 0.85);

    animation: anim2 2.1s cubic-bezier(0.13, 0.86, 0.86, 0.08) 0.7s infinite;
  }

  .circle-3 {
    transform: scale(0);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(37, 165, 204, 0.8);

    animation: anim3 2.1s cubic-bezier(0.13, 0.86, 0.86, 0.08) 1.4s infinite;
  }
}

.btn:focus:not(:active) {
  background-color: rgb(255, 75, 75);
  box-shadow: 0px 0px 20px 5px rgba(85, 85, 85, 0.8);
  animation: waveAnim 1000ms linear 0s 1, moveAnim 500ms linear 0s 1;
}

.btn:hover:not(:focus) {
  box-shadow: 0px 0px 20px 5px rgba(85, 85, 85, 0.8);
  transition: 600ms;
}

@keyframes anim1 {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(45deg) scale(1.2);
  }
  100% {
    transform: rotate(90deg) scale(0);
  }
}

@keyframes anim2 {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(45deg) scale(0.9);
  }
  100% {
    transform: rotate(90deg) scale(0);
  }
}

@keyframes anim3 {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(45deg) scale(0.7);
  }
  100% {
    transform: rotate(90deg) scale(0);
  }
}

@keyframes waveAnim {
  100% {
    box-shadow: 0px 0px 20px 5px rgba(85, 85, 85, 0.8);
  }
  50% {
    box-shadow: 0px 0px 40px 5px rgba(255, 5, 5, 0.7);
  }
}

@keyframes moveAnim {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.d-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
Categories

Beauty Animated Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
