Introduction
In this article I will describe how to create a Button using HTML5 and CSS3. I will create this button without use of a Photoshop Image or any image and I will not use a Form element Button of HTML.
Step 1
Design a div with the help of HTML and provide it properties with CSS.
HTML
<html>
<head>
<title>Creating-Button</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="button">
</div>
</body>
</html>
CSS
body {background-color:green
}
*{
margin: 0 auto;
}
#button {
background-color: pink;
margin-top:30px;
height: 40px;
width: 130px;
border-radius:50%;/*for making corners of div in round shape*/
border:groove;
}
![button-for-Creating-button-using-HTML5-and-CSS3.png]()
Step 2
Create an ANCHOR tag within the div (button) and provide it properties with CSS.
HTML
<div id="button">
<a>Home</a>
</div>
CSS
a {
margin-left:40px;
margin-top:20px;
font-weight:bold;
font-size:large;
}
![anchor-tag-for-Creating-button-using-HTML5-and-CSS3.jpg]()
Step 3
Provide properties for the div (button) on hover with CSS.
CSS
#button:hover {
background-color: red;
box-shadow:pink 5px 5px;
border:none;
}
![on-hover-for-Creating-button-using-HTML5-and-CSS3.png]()