Button Ripple Effect Animation using CSS only

Spread the love

A few months ago, we created ripple animation for buttons like Material Design that reveals on button active events. Today, we are back with the same ripple effect tutorial with different coding techniques. In the previous tutorial, we created the ripple animation using CSS keyframes and trigger the animation when the button activated. In this tutorial, we’ll reveal the button ripple effect without using CSS keyframes.

So, the technique is that we’ll create a class name "ripple" and define the circular ripple style with 0 dimensions inside the before pseudo-class. Then define the dimension with the focus selector to reveal the animation.

Before getting started with coding, let’s have a look at the demo page to see the ripple effect in action. You can set this effect for your existing buttons by adding the class name "ripple". Similarly, you can define the custom color and transition duration according to your needs. So, let’s get started with HTML to create a button and then apply a ripple effect to it.

Create HTML Button Element

In HTML, you need to create a button element with two classes "button-base" and "ripple". The first class defines the basic styles for the button and the other class handles the ripple animation. So, your HTML button looks like below:

<button class="button-base ripple">Ripple Button</button>

You are not limited to use only the button tag, you can also create a virtual button using a hyperlink, span, or div element, etc. Define the same classes for these elements as described in the following code:

<!-- Link as button -->
<a href="path/to/link.html" class="button-base ripple"> Link Button </a>

<!-- Span/div button -->
<span class="button-base ripple"> span Button </span>
<div class="button-base ripple"> div Button </div>

If you want to show the ripple effect for other elements like a div box, or section that you don’t want to display these elements like buttons. Then, you can add only the "ripple" class to your existing elements.

The CSS Styles

After creating the HTML, now we’ll define the CSS styles for the "button-base" and "ripple" class. You can add these styles to your project’s existing CSS file. Then you can apply ripple animation to any HTML element by just adding the “ripple” class to that element.

Therefore, target the first class "button-base" and define its font family, background color, and size. In order to set the custom styles for the button element, use the WebKit appearance none and remove the default border using CSS border none property. After that, you can define the custom values for the width, height, font size, and line-height, etc.

.button-base{
  font-family: 'Roboto', sans-serif;
  -webkit-appearance: none;
  border: none;
  text-transform: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #4285f4;
  color: #fff;
  vertical-align: middle;
  border-radius: 3px;
  line-height: 36px;
  min-height: 36px;
  font-size: 14px;
  text-align: center;
  text-decoration:none;
  text-transform: uppercase;
  min-width: 5.14em;
  padding:0 1em;
  margin: 0 0.25em;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
}

Also, disable the default button outline that displays on focus event. To do so, target the button-base class with the focus pseudo selector and use the CSS outline property with 0 value.

.button-base:focus{
  outline:0;
}

Of course! you need to have a hover style for the button element. In hover style, we’ll add a 2px gray box-shadow to the bottom of the button. So, target the "button-base" class with hover pseudo-selector and define the box-shadow as described below. If you wanted to make your buttons more attractive then check these buttons with 3D hover style.

.button-base:hover{
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);  
}

CSS Styles for Ripple Effect

Now, target the second class "ripple" and keep its relative position along with overflow hidden. This is the container for the ripple effect.

.ripple{
  position: relative;
  overflow: hidden; 
}

After that, target the "ripple" class with :before pseudo selector and define the 50% border radius for the circular ripple effect. Similarly, define the background color and set the absolute position with 50% top and left values. Here the important thing is the width and height property that you need to set as 0.

.ripple:before {
  border-radius: 50%;
  background-color: rgba(255,255,255,0.6);
  content:'';
  position: absolute;
  top: 50%; left: 50%;
  width:0; height:0;
}

Again target the "ripple" class with both focus and before pseudo selector and define the 160px value for width and height. Use the CSS transition value and specify 0 value for the opacity.

.ripple:focus:before {
  transition: all 0.5s ease-out;
  opacity:0;
  width:160px;
  height:160px;
  margin-top:-80px;
  margin-left:-80px;
}

You have done it! Hopefully, now you are able to create a button ripple effect using CSS only. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

Leave a Comment