button styling css

1button {
2  background: transparent;
3  box-shadow: 0px 0px 0px transparent;
4  border: 0px solid transparent;
5  text-shadow: 0px 0px 0px transparent;
6}
7
8button:hover {
9  background: transparent;
10  box-shadow: 0px 0px 0px transparent;
11  border: 0px solid transparent;
12  text-shadow: 0px 0px 0px transparent;
13}
14
15button:active {
16  outline: none;
17  border: none;
18}
19
20button:focus {
21  outline: 0;
22}

1button {
2    border: none;
3}
4
5button:focus {
6    border: none;
7    outline: none;
8}
9
10button:focus{
11    outline:none !important;
12}
13(add !important if it is used in Bootstrap)

1.button {
2    font-size: 16px;
3    letter-spacing: 2px;
4    font-weight: 400 !important;
5    background-color: #e63946ff;
6    color: #fff;
7    padding: 23px 50px;
8    margin: auto;
9    text-align: center;
10    display: inline-block !important;
11    text-decoration: none;
12    border: 0px;
13    width: max-content;
14    cursor: pointer;
15    transition: all 0.3s 0s ease-in-out;
16}
17
18.button:hover {
19    transform: scale(1.04, 1);
20    background-color: rgb(216, 10, 27);
21    text-decoration: none;
22}
23
24/* add extra functionality in button*/
25
26
27/*button sizes*/
28.btn_sm {
29    padding: 17px 40px !important;
30}
31
32.btn_md {
33    padding: 20px 50px !important;
34}
35
36.btn_lg {
37    padding: 23px 60px !important;
38}
39
40
41/*make your button block level*/
42.btn_block {
43    width: 100% !important;
44    padding: 22px 30px !important;
45}

1.button {
2
3	background-color: orange;
4  	padding: 2px;
5  	border: none;
6  	opacity: 0.6;
7  
8}
9
10.button:hover{
11  background-color: cyan;
12  opacity: 1;
13}
14

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.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}