Sunday, January 21, 2018

Skptricks CSS html html5 web development Ripple Effect Animation On Button Click With CSS3

Ripple Effect Animation On Button Click With CSS3

by on January 21, 2018 in , , ,
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.

By at
Tags: , , ,

4 comments:

  1. UnknownJune 23, 2018 at 9:28 AM

    Safari not work

    ReplyDelete
    Replies
    1. Sumit Kumar PradhanJune 23, 2018 at 11:37 AM

      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. UnknownAugust 2, 2018 at 10:44 AM

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

    ReplyDelete
  3. skOctober 5, 2019 at 4:46 PM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)