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
  1. <html>  
  2. <head>  
  3.     <title>Creating-Button</title>  
  4.     <link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  
  5. </head>  
  6. <body>  
  7.     <div id="button">  
  8.     </div>  
  9. </body>  
  10. </html> 
CSS
  1. body {background-color:green  
  2. }  
  3. *{  
  4.    margin0 auto;  
  5. }  
  6. #button {  
  7.     background-color: pink;  
  8.     margin-top:30px;  
  9.     height40px;  
  10.   
  11.     width130px;  
  12.     border-radius:50%;/*for making corners of div in round shape*/  
  13.     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
  1. <div id="button">  
  2.        <a>Home</a>  
  3.     </div> 
CSS
  1. a {  
  2.     margin-left:40px;  
  3.     margin-top:20px;  
  4.     font-weight:bold;  
  5.     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
  1. #button:hover {  
  2.     background-colorred;  
  3.     box-shadow:pink 5px 5px;  
  4.     border:none;  
on-hover-for-Creating-button-using-HTML5-and-CSS3.png


Similar Articles