Post
Ask Question

Creating a Button using HTML5 and CSS3

Introduction

 
In this article, we are going to create a button and give it feeling like 3D using HTML5 and CSS3.
 

Starting from HTML Document 

  1.  <body>  
  2.             <a href="#" class="red">Click Here</a>  
  3. </body>  
Preview
 
image1.JPG
 
 

Styling it using CSS

  1. .box {  
  2.     background-color: #e1e1e6;  
  3.     width: 400px;  
  4.     height: 100px;  
  5.     border: 1px solid black;  
  6.     border-radius: 5px;  
  7. }  
  8.   
  9.   
  10. /*for styling box inside which button is placed*/  
  11.   
  12. .red {  
  13.     position: relative;  
  14.     top: 36px;  
  15.     left: 35%;  
  16.     text-decoration: none;  
  17.     color: #fff;  
  18.     background: #cb2727;  
  19.     text-align: center;  
  20.     padding: 20px 30px;  
  21.     width: 115px;  
  22.     border-radius: 5px;  
  23.     border: solid 1px #ec3838;  
  24.     transition: all 0.1s;  
  25.     -webkit-box-shadow: 0px 9px 0px #a81515;  
  26.     /*for opera and safari*/  
  27.     -moz-box-shadow: 0px 9px 0px #a81515;  
  28.     /*for mozilla*/  
  29.     -o-box-shadow: 0px 9px 0px #a81515;  
  30.     /*for opera*/  
  31.     -ms-box-shadow: 0px 9px 0px #a81515;  
  32.     /*for I.E.*/  
  33. } 
Here we set text-decoration to none so that link underline removed. After that adjusted color and background-color. Then set text-align and padding. Important Step here is transition and box-shadow.
 
CSS3 transitions are effects that let an element gradually change from one style to another.
 
Preview
 
image2.JPG
 

Final step (Adding CSS for :active)

 
The : active selector is used to select and style the active link. A link becomes active when you click on it.
  1. .red:active {  
  2.     -webkit-box-shadow: 0px 2px 0px #a81515;  
  3.     position: relative;  
  4.     top: 43px;  
  5. } 
The main trick behind this button's working is that decrease box-shadow and move the position slightly down so that appears pressing down
 
Preview (working)
 
image3.JPG
 
That's all.


Similar Articles