Author: | Timguru |
---|---|
Views Total: | 1,461 views |
Official Page: | Go to website |
Last Update: | November 6, 2020 |
License: | MIT |
Preview:

Description:
A CSS only button UI template that helps you create Material Design style web buttons with a ripple click/tap animation.
How to use it:
1. Create a normal <button> element on the page.
<button class="ripple">Click me</button>
2. The core CSS styles for the Material Design button.
button { margin-top: -30px; position: relative; overflow: hidden; -webkit-transition: background 400ms; transition: background 400ms; color: #fff; background-color: #6200ee; padding: 1em 2rem; font-family: 'Roboto', sans-serif; font-size: 1.5rem; outline: 0; border: 0; border-radius: 0.25rem; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); cursor: pointer; }
3. Apply a ripple effect to the button when clicked/tapped.
.ripple { background-position: center; -webkit-transition: background 0.8s; transition: background 0.8s; } .ripple:hover { background: #6200ee radial-gradient(circle, transparent 1%, #6200ee 1%) center/15000%; } .ripple:active { background-color: #cfb2f9; background-size: 100%; -webkit-transition: background 0s; transition: background 0s; }