web-button-Css/buttonCss.html at master · celalce/web-button-Css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<style>

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #3c1de9;} /* Blue */
.button2 {background-color: #a7ba00;} /* Yellow */
.button3 {background-color: #0e9224;} /* Green */
.button4 {background-color: #ba0000;} /* Red */

.button5 {background-color: #3c1de9; border-radius:10px; }/**border-radius:*/
.button6 {background-color: #a7ba00;border-radius:10px} /** border-radius*/
.button7 {background-color: #0e9224;border-radius:10px} /** border-radius:*/
.button8 {background-color: #ba0000;border-radius:10px} /** border-radius:*/


.button9  {background-color: #3c1de9; border-radius:10px;box-shadow: 2px 10px 10px 2px #282c29; }/** box-shadow:*/
.button10 {background-color: #a7ba00;border-radius:10px;box-shadow: 2px 10px 10px 2px #282c29;} /** box-shadow:*/
.button11 {background-color: #0e9224;border-radius:10px;box-shadow: 2px 10px 10px 2px #282c29;} /** box-shadow:*/
.button12 {background-color: #ba0000;border-radius:10px;box-shadow: 2px 10px 10px 2px #282c29;} /** box-shadow:*/

</style>
</head>
<body>

<h1>The button element - Styled with CSS</h1>
<p>Change the style of a button with CSS </p>

<button class="button button1">Blue</button>
<button class="button button2">Yellow</button>
<button class="button button3">Green</button>
<button class="button button4">Red</button>
<br>
<br>
<button class="button button5">Button</button>
<button class="button button6">Button </button>
<button class="button button7">Button </button>
<button class="button button8">Button </button>
<br>
<br>
 <button class="button button9">Button</button>
 <button class="button button10">Button </button>
 <button class="button button11">Button </button>
 <button class="button button12">Button </button>


</body>
</html>