File: buttons.css

Recommend this page to a friend!
  Classes of Andras Toth   Material Design styled ripple effect   buttons.css   Download  
File: buttons.css
Role: Auxiliary data
Content type: text/plain
Description: stylesheet
Class: Material Design styled ripple effect
Show the ripple effect on a given page element
Author: By
Last change:
Date: 8 years ago
Size: 1,299 bytes
 

Contents

Class file image Download
md-button, .bt { -webkit-transition: all .3s cubic-bezier(.4, 0, .2, 1); transition: all .3s cubic-bezier(.4, 0, .2, 1); background-color: #2196F3; border: 1px transparent; border-radius: 2px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .26); box-sizing: border-box; color: #FFF; cursor: pointer; display: inline-block; font-size: 16px; height: 100%; line-height: 1; margin: 4px; min-width: 88px; outline: 0; overflow: hidden; padding: 8px; text-align: center; vertical-align: middle } .bt-float { border-radius: 50%; height: 48px; min-width: 0; padding: 8px; width: 48px } .sh-0 { border: 1px solid #eee } .sh-1 { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .26) } md-button:hover, .bt:hover, .sh-2 { box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .19), 0 8px 17px 0 rgba(0, 0, 0, .2) } md-button:active, .bt:active, .sh-3 { box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24) } .sh-4 { box-shadow: 0 25px 55px 0 rgba(0, 0, 0, .21), 0 16px 28px 0 rgba(0, 0, 0, .22) } .sh-5 { box-shadow: 0 40px 77px 0 rgba(0, 0, 0, .22), 0 27px 24px 0 rgba(0, 0, 0, .2) }