Button effect similar to Material – UI

steps

1. Write one on the pagebuttonAnd give it a simple style

code

<body>
   <div>
       <button>This is a button</button>
   </div>
</body>
Copy the code
button {
   display: block; /* Button defaults to inline-block and cannot be centered with margin */
   margin: 50px auto;
   height: 60px;
   width: 150px;
   color: #FFF;
   font-size: 16px;
   background: #E95546;
   outline: none;
   border: 0;
   cursor: pointer; /* To increase the user experience */
   
   position: relative; /* To maintain position relationship with ripple */
   overflow: hidden; /* To cover the excess ripple */
}
Copy the code

The effect

2. Add basic CSS styles for water ripples

code

.ripple {
  position: absolute; /* To keep the position of the button */
  border-radius: 50% 50%; /* Water ripples are round */
  background: rgba(255, 255, 255, 0.4);  /* Water ripple color */
  
  /* The state below is 0% relative to the animation effect */
  /* The default transform-origin is center */
  transform: scale(0); 
  -webkit-transform: scale(0);
  opacity: 1; 
}
Copy the code

3. Animate the water ripple with CSS

code

.rippleEffect {
  /* Execute rippleDrop */
  -webkit-animation: rippleDrop .6s linear; 
  animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  /* Below is the state of the animation at 100% */
  100% {
    transform: scale(2); 
    -webkit-transform: scale(2);
    opacity: 0; @ -}}webkit-keyframes rippleDrop {
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0; }}Copy the code

4. Finally add the click event

code

$("button").click(function (e) {$(".ripple").remove(); // Delete the water ripple div each time

  let button_left = $(this).offset().left; // Button distance from the left of the page
  let button_top = $(this).offset().top; // Button distance from the top of the page
  let button_width = $(this).width(); // Button width
  let button_height = $(this).height(); // Button height

  // The water ripple div is a circle, making its radius equal to the longest edge of the button
  let ripple_width = 0;
  ripple_width = button_width > button_height ? button_width : button_height; 

  // e.pagex is the distance from the mouse trigger point of the click event to the left of the page
  // e.pagey is the distance from the mouse trigger point of the click event to the top of the page
  (e.pagex-button_left, e.pagey-button_top); (e.pagex-button_left, e.pagey-button_top)
  // But transform-origin defaults to center, so subtracting the radius from this is where the div should be
  let ripple_x = e.pageX - button_left - ripple_width / 2;
  let ripple_y = e.pageY - button_top - ripple_width / 2;
 
  // Insert a water ripple div into the button
  $(this).prepend("<div class='ripple'></div>");
  
  // Apply styles and animations to the water ripple div
  $(".ripple")
  .css({
    width: ripple_width + 'px'.height: ripple_width + 'px'.top: ripple_y + 'px'.left: ripple_x + 'px'
  })
  .addClass("rippleEffect");

})
Copy the code

Don’t forget to introduce jquery for Attention

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
Copy the code

The effect

END

The source address