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.
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .15), 0 3px 1px -2px rgba(0, 0, 0, .20), 0 1px 5px 0 rgba(0, 0, 0, .12);
padding: 0px 16px;
background: #FF5722 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.50);
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
In your HTML, simply apply the btn class to your button element.
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