Wikipedia:Ultraviolet/MDLButton-mock.css

/** * This stylesheet mocks the buttons used for Material Design Lite * and other programs which follow the Material Design specification. * * This stylesheet mocks the buttons, as seen in * https://getmdl.io/components/index.html#buttons-section * * Do note that the MDL-oriented design of Material Design is * outdated, and you should instead follow the rules as defined in * the Material webpage instead: * https://material.io/components/buttons/web * * Some parts of this stylesheet come from parts of the Material * Design Lite library. MDL is released under the Apache License 2.0. * Its repository and license text are linked below. * * https://github.com/google/material-design-lite * https://github.com/google/material-design-lite/blob/mdl-1.x/LICENSE * * A copy of the compiled version of MDL (the basis for this stylesheet) * can be found at: * https://getmdl.io/material.min.css

/** Standard Button **/ .mdl-button { background: 0 0; border: none; border-radius: 2px; color: #000; position: relative; height: 36px; margin: 0; min-width: 64px; padding: 0 16px; display: inline-block; font-family: "Roboto","Helvetica","Arial",sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; overflow: hidden; transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1); cursor: pointer; text-decoration: none; text-align: center; line-height: 36px; vertical-align: middle; }

.mdl-button:hover { background-color: rgba(158,158,158,.2); }

/** Flat button **/ .mdl-button--primary.mdl-button--primary, .mdl-button--primary.mdl-button--primary a { color: #3f51b5; } .mdl-button--accent.mdl-button--accent, .mdl-button--accent.mdl-button--accent a { color: #ff4081; }

.mdl-button:active { background-color: rgba(158,158,158,.4); }

/** Raised Button **/ .mdl-button--raised { background: rgba(158,158,158,.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); }

.mdl-button--raised.mdl-button--colored { background: rgb(33,150,243); color: #fff; }

.mdl-button--raised.mdl-button--colored a { color: #fff; }

.mdl-button--raised.mdl-button--colored:hover { background-color: rgb(33,150,243); }

.mdl-button--raised:active { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2); background-color: rgba(158,158,158,.4); }

.mdl-button--raised.mdl-button--colored:active { background-color: rgb(10, 110, 189); }

/** Accent buttons **/ .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab { color: #fff; background-color: #ff4081; }

.mdl-button--accent.mdl-button--accent.mdl-button--raised a, .mdl-button--accent.mdl-button--accent.mdl-button--fab a { color: #fff; }