Sunday, January 21, 2018

Ripple Effect Animation On Button Click With CSS3

If you have used lollipop version of android you see a nice ripple effect on button clicks. This tutorial is about achieving similar result, the CSS ripple effect on button clicks.

CSS Ripple effect does not involves any javascript or jquery library. The effect is achieved using CSS3 animation. Keyframe property of css provides very smooth animation effect.

create ripple animation effect using css



Video Link :




Lets see the complete example to create ripple effect on button clicks.
<html>
<head>
<style>
/* Material style */
button {
  border: none;
  cursor: pointer;
  color: white;
  padding: 10px 30px;
  border-radius: 2px;
  font-size: 22px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
  
}
.button1 {
  background: #ff4040;
}
.button2 {
  background: #ffa96b;
}
.button3 {
  background: #2196F3;
}
.button4 {
  background: #5cd38c;
}


/* Ripple magic */
button{
  position: relative;
  overflow: hidden;
  margin :10px;
}

button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}


</style>
</head>

<body>
 
<button class="button1" >Click Me...</button>
<button class="button2" > Click Me...</button>
<button class="button3"> Click Me...</button>
<button class="button4"> Click Me...</button>

</body>
</html>

Output : 
This all about the ripple effect on button clicks. In case of any queries please do comments in comment box below.


4 comments:

  1. Replies
    1. add webkit property to css property, then it will work.

      replace existing code
      transform
      transform-origin:
      box-shadow:

      to

      -webkit-transform
      -webkit-transform-origin:
      -webkit-box-shadow:

      Delete
  2. Ripple effect like to water bubbling is awesome....thanks for sharing that kind of information
    mobile application development company in UK

    ReplyDelete
  3. Thanks for sharing the info, keep up the good work going.... I really enjoyed exploring your site. good resource...home depot survey

    ReplyDelete