In this tutorial we are going to learn how to create ripple animation on hover. All this animation effect is created with the help of CSS3 Keyframe property. Here we have provided three different type of ripple animation effect on hover the HTML element/button.


Check out our blog archive on the topic if you’re looking to learn about Ripple Animation Effect.

Lets see the complete example to perform Ripple Animation Effect on hover HTML Element.

        body {
            font-family: Verdana, Geneva, sans-serif;
            background-color: #EEE;
}
        div {
            position: relative;
            margin: 12px;
            left: 22px;
}
#list {
            width: 300px;
            height: 55px;
            border: 1px solid #d6d7da;
            padding: 0px 15px 15px 15px;
            border-radius: 5px;
            font-family: arial;
            line-height: 16px;
            color: #333333;
            font-size: 14px;
            background: #ffffff;
            top: 12px;
            padding: 16px;
            border-radius: 2px;
            font-size: 28px;
            text-align: center;
}
.button1 {
            width: 200px;
            border: none;
            cursor: pointer;
            color: white;
            padding: 16px;
            border-radius: 2px;
            font-size: 28px;
            text-align: center;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
            background: #ff4040;
}
.button2 {
            width: 200px;
            border: none;
            cursor: pointer;
            color: white;
            padding: 16px;
            border-radius: 2px;
            font-size: 28px;
            text-align: center;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
            background: #ffa96b;
}
.animation1 {
            position: absolute;
            width: 75px;
            height: 75px;
            background-color: #FFF;
            top: 0;
            left: 55px;
            top: -13px;
            transform: scale(0);
            opacity: 0.5;
            border-radius: 300px;
}
.animation2 {
            position: absolute;
            width: 230px;
            height: 70px;
            background-color: #FFF;
            top: -14px;
            left: -10px;
            transform: scale(0);
            opacity: 0.5;
}
.animation3 {
            position: absolute;
            width: 330px;
            height: 90px;
            background-color: #FFCCCC;
            top: -14px;
            left: -10px;
            transform: scale(0);
            opacity: 0.5;
}
.button1:hover > .animation1 {
            animation: ripple1 2s;
}
.button2:hover > .animation2 {
            animation: ripple2 2s;
}
#list:hover > .animation3 {
            animation: ripple2 2s;
}
@keyframes ripple1 {
0% {
                transform: scale(0);
}
20% {
                transform: scale(1);
                opacity: 0.3;
}
100% {
                transform: scale(1);
                opacity: 0;
}
}
@keyframes ripple2 {
0% {
                transform: scaleX(0);
}
20% {
                transform: scaleX(1);
                opacity: 0.3;
}
100% {
                transform: scaleX(1);
                opacity: 0;
}
}





 class="button1">Animation 1
 class="animation1">



 class="button2">Animation 2
 class="animation2">



 id="list"> Animation 3
 class="animation3">

Output:

This all about the ripple animation effect on hover the HTML element/button. Let us know in case of any issues in comment section below.

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Create%20Ripple%20Animation%20Effect%20Using%20Css