How to Apply Ripple Effect to On Button With CSS

Ripple effect is the most commonly used effect on websites and applications. This effect makes our website more liquid and makes it feel elegant. Ripple effect can be easily applied to any website element via 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 create 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 also called ripple and put it as hover in ripple class.

I hope you found this post informative.

Enjoy Coding 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
php Date Time functions
List of PHP Date/Time Functions With Examples

Sometimes it is necessary to display the current time and date in your input field of the form, or any...

Close