css button

1
2.button {
3  background-color: #4CAF50; /* Green */
4  border: none;
5  color: white;
6  padding: 15px 32px;
7  text-align: center;
8  text-decoration: none;
9  display: inline-block;
10  font-size: 16px;
11} 

1<button style="background-color: turquoise; border: none; border-radius: 5px; color: #333; /* Dark grey */ padding: 15px 32px">Example button</button>

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>

1transform: scale(4); /* This will make the component 4 times bigger  */

1.placeholder-box {
2  position: relative;
3  display: block;
4  width: 300px;
5  min-height: 150px;
6  margin-top: 50px;
7  padding: 30px;
8  border: 1px solid #888;
9  border-radius: 10px;
10  box-sizing: border-box;
11  box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
12}
13
14.placeholder-box p {
15  text-align: center;
16  margin: 0 0 15px;
17}
18
19.placeholder-box ul {
20  margin: 0;
21}
22
23/* Button */
24
25button {
26 display: block;
27 border: solid white;
28 border-width: 0 10px;
29 border-radius: 0;
30 background: green;
31 color: white;
32 font-size: 18px;
33 margin: -60px auto 15px;
34 padding: 15px;
35}

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