1<div>
2 <style scoped="">
3 .button-xsmall {
4 font-size: 70%;
5 }
6
7 .button-small {
8 font-size: 85%;
9 }
10
11 .button-large {
12 font-size: 110%;
13 }
14
15 .button-xlarge {
16 font-size: 125%;
17 }
18 </style>
19 <button class="button-xsmall pure-button">Extra Small Button</button>
20 <button class="button-small pure-button">Small Button</button>
21 <button class="pure-button">Regular Button</button>
22 <button class="button-large pure-button">Large Button</button>
23 <button class="button-xlarge pure-button">Extra Large Button</button>
24</div>
1<button class="pure-button pure-button-disabled">A Disabled Button</button>
2<button class="pure-button" disabled="">A Disabled Button</button>
1.btn:hover { background: #2079b0; background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0); background-image: -moz-linear-gradient(top, #2079b0, #eb94d0); background-image: -ms-linear-gradient(top, #2079b0, #eb94d0); background-image: -o-linear-gradient(top, #2079b0, #eb94d0); background-image: linear-gradient(to bottom, #2079b0, #eb94d0); text-decoration: none;}