OLD | NEW |
| (Empty) |
1 paper-button | |
2 ============ | |
3 | |
4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h
tml">Buttons</a> | |
5 | |
6 `paper-button` is a button. When the user touches the button, a ripple effect em
anates | |
7 from the point of contact. It may be flat or raised. A raised button is styled w
ith a | |
8 shadow. | |
9 | |
10 Example: | |
11 ```html | |
12 <paper-button>flat button</paper-button> | |
13 <paper-button raised>raised button</paper-button> | |
14 <paper-button noink>No ripple effect</paper-button> | |
15 ``` | |
16 You may use custom DOM in the button body to create a variety of buttons. For ex
ample, to | |
17 create a button with an icon and some text: | |
18 | |
19 ```html | |
20 <paper-button> | |
21 <iron-icon icon="favorite"></iron-icon> | |
22 custom button content | |
23 </paper-button> | |
24 ``` | |
25 ## Styling | |
26 | |
27 Style the button with CSS as you would a normal DOM element. | |
28 | |
29 ```css | |
30 /* make #my-button green with yellow text */ | |
31 #my-button { | |
32 background: green; | |
33 color: yellow; | |
34 } | |
35 ``` | |
36 By default, the ripple is the same color as the foreground at 25% opacity. You m
ay | |
37 customize the color using this selector: | |
38 | |
39 ```css | |
40 /* make #my-button use a blue ripple instead of foreground color */ | |
41 #my-button::shadow paper-ripple { | |
42 color: blue; | |
43 } | |
44 ``` | |
45 The opacity of the ripple is not customizable via CSS. | |
OLD | NEW |