Chia sẻ code button với hiệu ứng bong bóng hoa giấy

Mở đầu

Bạn sẽ dùng tới button rất nhiều vào trong trang web hay blog của mình. Hôm nay, mình xin chia sẻ cho các bạn thêm 1 button với hiệu ứng bong bóng hoa giấy khi kích chuột khá là đẹp.
Button này khá nhẹ nên sẽ không ảnh hưởng tới độ load của trang.

Hướng dẫn

Bước 1: Sao chép toàn bộ CSS dưới đây dán vào phía trên thẻ ]]></b:skin>


.xtpro-bubbly-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: #0EA1FF;
  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(86, 194, 255, 1);
}
.xtpro-bubbly-button:focus {
  outline: 0;
}
.xtpro-bubbly-button:before, .bubbly-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;
}
.xtpro-bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, transparent 20%, #0EA1FF 20%, transparent 30%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, transparent 10%, #0EA1FF 15%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.xtpro-bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, transparent 10%, #0EA1FF 15%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%), radial-gradient(circle, #0EA1FF 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.xtpro-bubbly-button:active {
  transform: scale(0.9);
  background-color: #0EA1FF;
  box-shadow: 0 2px 25px rgba(86, 194, 255, 1);
}
.xtpro-bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.xtpro-bubbly-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%;
  }
}

Bước 2: Sao chép đoạn JS dưới đây dán vào phía trên thẻ </body> hoặc </head>


<script>
var animateButton = function(e) {

  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },700);
};

var bubblyButtons = document.getElementsByClassName("xtpro-bubbly-button");

for (var i = 0; i < bubblyButtons.length; i++) {
  bubblyButtons[i].addEventListener('click', animateButton, false);
}
                                         </script>
                                         

Bước 3: Chèn button vào bất cứ vị trí bạn muốn


<button class="xtpro-bubbly-button">Xuan Trung Pro</button>

Toàn bộ code button với hiệu ứng bong bóng hoa giấy đã được mình chia sẽ bên trên, hãy tận hưởng nó.

Tham khảo thêm: Code Pro

Lời kết

Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha.

Related Posts
Rate this post

XTT

Subscribe to my Youtube channel