Post
Ask Question

Create Button Using HTML5 and CSS3

Introduction

In this article, I will describe how to create a Button using HTML5 and CSS3. I will create this button without the 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 its 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

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-u

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-usi


Similar Articles