September 27, 2021

Ripple button effect

<button class="rippleButton">Ripple Button</button>

 

.rippleButton { background: linear-gradient(90deg, #FF9800, #FF5722); color: #fff; font-size: 16px; padding: 10px 45px; border:none; border-radius: 25px; cursor: pointer; outline: none;        } 
      .rippleButton .btn-ripple { background: rgba(255, 255, 255, 0.3); position: absolute; transform: scale(0); animation: ripple 1s; border-radius: 100%;}
      
      @keyframes ripple {
          100%{ transform: scale(2); opacity: 0;}
      }

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
   $(function(){
 
  function RippleStyle(width, height, posX, posY){
    this.width = ( width <= height ) ? height : width;
    this.height = ( width <= height ) ? height : width;
    this.top = posY - (this.height * 0.5);
    this.left = posX - (this.width * 0.5);
  }

  $('.rippleButton').on('mousedown', function(e){ 
    var rippleEl = $('<span class="btn-ripple"></span>').appendTo(this);
 
    var pos = $(this).offset();
 
    var width = $(this).outerWidth();
    var height = $(this).outerHeight();
 
    var posX = e.pageX - pos.left;
    var posY = e.pageY - pos.top;
 
    var rippleStyle = new RippleStyle(width, height, posX, posY);
    rippleEl.css(rippleStyle);
  });
 
  $('.rippleButton').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', '.rippleButton-ripple', function(){
    $(this).remove();
  });
});
    </script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *