In this first article of our new Material Design Web Tutorial series, we will demonstrate a simple way to create a material design raised button with a ripple effect. Now, there are many ways to achieve this, including using JavaScript or JQuery, but, for this tutorial, we will keep it simple and use plain CSS.

The CSS

The CSS with be the bulk of this demo. In the first few lines we used the  .btn  class to style the button as close to the material design specifications as possible–box shadow, padding, etc. The two background properties are telling the browser to 1) render from the middle and 2) fill up100% of the container.

The :active pseudo class will trigger on a user click event. In this class we set the box shadow to create a rising effect. The ripple effect is created by setting a radial gradient background(expanded to 1000%)  and setting the transition property to transition between the radial background and the original background. This will produce a nice subtle ripple effect when the button is clicked. Try tinkering with these properties to create the effect that best suits your taste.

The HTML

In your HTML, simply apply the btn class to your button element.

The Result

By using just a few lines of CSS we have successfully created a material design button that rises and ripples. Check out the live demo below!

See the Pen OMGBrO by WebDevUnlimited (@WebDevUnlimited) on CodePen.0

Share this:

• Facebook
• Twitter
• Google+
• LinkedIn