forked from kaziadilmemon/Master-HTML-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Styling Links & Buttons.html
55 lines (52 loc) · 1.63 KB
/
Styling Links & Buttons.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Links and Buttons</title>
<style>
.container{
background-color: aqua;
border: 32px solid rgb(rgb(182, 167, 167);
width: 666px;
padding: 23px auto;
margin: 34px;
a{
text-decoration: none;
colour:black;
}
a:hover{
background-color: black;
}
a:visited{
background-color: yellow;
}
a:active{
background-color: darkblue;
}
.btn{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
background-color: aqua;
padding: 23px;
cursor: pointer;
border: none;
font-size: 13px;
border-radius: 4px;
}
.btn:hover{
background-color: black;
border:2px solid red;
}
</style>
</head>
<body>
<div class="container" id="cont1">
<h3>This is a heading</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium minima natus molestiae nihil deserunt iure quis. Aliquid adipisci accusantium illo dolorum animi facilis enim, vel ipsa quia, sunt iure incidunt laborum accusamus aut at!</p>
<a href="https://www.google.com/" class="btn">Read more</a>
<button class="btn">Contact Us</button>
</div>
</body>
</html>