button style css

1<div>
2    <style scoped="">
3        .button-success,
4        .button-error,
5        .button-warning,
6        .button-secondary {
7            color: white;
8            border-radius: 4px;
9            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
10        }
11
12        .button-success {
13            background: rgb(28, 184, 65);
14            /* this is a green */
15        }
16
17        .button-error {
18            background: rgb(202, 60, 60);
19            /* this is a maroon */
20        }
21
22        .button-warning {
23            background: rgb(223, 117, 20);
24            /* this is an orange */
25        }
26
27        .button-secondary {
28            background: rgb(66, 184, 221);
29            /* this is a light blue */
30        }
31    </style>
32    <button class="button-success pure-button">Success Button</button>
33    <button class="button-error pure-button">Error Button</button>
34    <button class="button-warning pure-button">Warning Button</button>
35    <button class="button-secondary pure-button">Secondary Button</button>
36</div>

1<a class="pure-button" href="#">A Pure Button</a>
2<button class="pure-button">A Pure Button</button>

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<div class="pure-button-group" role="group" aria-label="...">
2    <button class="pure-button">A Pure Button</button>
3    <button class="pure-button">A Pure Button</button>
4    <button class="pure-button pure-button-active">A Pure Button</button>
5</div>

1<button class="pure-button">
2    <i class="fa fa-cog"></i>Settings
3</button>
4<a class="pure-button" href="#">
5    <i class="fa fa-shopping-cart fa-lg"></i>Checkout
6</a>

1<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
2<button class="pure-button pure-button-primary">A Primary Button</button>

1<a class="pure-button pure-button-active" href="#">An Active Button</a>
2<button class="pure-button pure-button-active">An Active Button</button>