-
Notifications
You must be signed in to change notification settings - Fork 1
/
html_css_button_styling.html
78 lines (67 loc) · 2.26 KB
/
html_css_button_styling.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STYLING BUTTONS BY USING CSS IN HTML</title>
</head>
<style>
body{
background-color: rgb(247, 212, 214);
}
.container {
padding: 10px;
width: 500px;
border: 2px solid blue;
margin: auto;
font-family: 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: rgb(248, 204, 147);
text-align: center;
border-radius:50px;
}
h1 {
font-size: 100px;
font-weight: bolder;
font-family: monospace;
color: rgb(0, 255, 179);
}
.btn {
text-decoration: none;
cursor: pointer;
font-size: 20px;
background-color: brown;
color: cornsilk;
border: none;
border-radius: 30px;
}
.btn:hover {
color: black;
background-color: whitesmoke;
font-family: 'Times New Roman', Times, serif;
}
.btn:visited {
background-color: rgb(161, 161, 240);
color: rgb(162, 0, 255);
border: 2px solid black;
}
.btn:active {
background-color: greenyellow;
}
</style>
<body>
<div class="container" id="cont1">
<h1>01</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt earum atque vero expedita. Voluptates
voluptate sunt expedita culpa aperiam quis fuga, ipsum ea voluptas dignissimos aut porro temporibus
asperiores unde. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, itaque molestiae deserunt
consequuntur magni ut quasi dolores nam error, incidunt nihil. Voluptate obcaecati laudantium dolorum
excepturi! Dolorem beatae autem vel? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora
corporis ullam quo. Delectus, hic.
Repudiandae enim, vero porro natus fugit hic impedit suscipit nemo ratione sunt molestiae vel tempore autem
</p>
<a href="https://www.google.com" class="btn" target="_blank">Read Me</a>
<button name="selected" class="btn">Contact</button>
</div>
</div>
</body>
</html>