Styling Link Buttons
<!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">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title> Styling Link Buttons</title>
<style>
a, span {
font-size: 1.2em;
}
.btnSkill:link, .btnSkill:visited {
display: inline-block;
background-color: blue;
color: white;
text-align: center;
text-decoration: none;
border: 3px solid;
border-radius: 10px;
padding: 14px 25px;
}
.btnSkill:hover, .btnSkill:active {
background-color: coral;
}
.btnWork:link, .btnWork:visited {
display: inline-block;
background-color: white;
color: black;
text-align: center;
text-decoration: none;
border: 2px solid indigo;
border-radius: 10px;
padding: 10px 20px;
}
.btnWork:hover, .btnWork:active {
background-color: indigo;
color: white;
}
</style>
</head>
<body>
<!--
links : can be styled with any CSS property (e.g. color, font-family, background, etc.).
links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
text-decoration : property is mostly used to remove underlines from links
Link Buttons : we combine several CSS properties to display links as boxes/buttons
-->
<h1>Demo: Styling Link Buttons</h1>
<span>
<a class="btnSkill" href="https://skillzam.com" target="_blank">Skillzam</a>
</span> <br> <br>
<span>
<a class="btnWork" href="https://workzam.com" target="_blank">Workzam</a>
</span>
</body>
</html>