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.


No comments:

Post a Comment