How To

How to Apply Ripple Effect to On Button With CSS

The Ripple effect is the most commonly used effect on websites and applications. Also, this effect makes our website more liquid and makes it feel elegant. We can easily apply the Ripple effect on any element of a website using CSS.

Here we have given an example on how to create a ripple effect on a button element.

Ripple Effect On Button Hover Effect

The given below code is having the onhover ripple effect applied on the button.

<!DOCTYPE html>
<html>
    <head>
        <title>Ripple effect on button</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">
        <style>
            button{
                display: block;
                margin: auto;
                height: 50px;
                width: 50px;
                font-size: 32px;
                text-align: center;
                padding: 8px 0;
                background-color: #1a237e;
                color: #fff;
                border: none;
                border-radius: 100%;
            }
            .ripple:after{
                content: '';
                height: 50px;
                top: -45px;
                position: relative;
                border-radius: 50%;
                display: block;
                background-color: #1a237e;
                z-index: -1;
            }
            .ripple:hover::after{
                -webkit-animation: ripple 1.5s ease-out;
                -moz-animation: ripple 1.5s ease-out;
                -ms-animation: ripple 1.5s ease-out;
                -o-animation: ripple 1.5s ease-out;
                animation: ripple 1.5s ease-out;
            }            
            
            @keyframes ripple{
              0%{
                width: 50px;
                height: 50px;
                opacity: 1;
                transform: translate(0px, 0px);
              }
              100%{
                width: 100px;
                height: 100px;
                opacity: 0;
                transform: translate(-25px, -25px);
              }
            }

        </style>
    </head>
    <body>
        <button class="ripple"><i class="fa fa-plus"></i></button>
    </body>
</html>

Explanation

In the above HTML code, we created a class called ripple and applied it to the button.
Next, we create an after element via CSS for ripple class to create a ripple effect container.
Finally, we create an animation for the ripple effect called ripple and put it as hover in ripple class.

Read Also: How to Create Ripple Effect Loader Using CSS

Conclusion

Now you can try the ripple effect on any button. You can also try the ripple effect on other elements to create a material HTML theme with a classic look and soft texture.

I hope you found this post informative.

Enjoy Coding 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.