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. }
  10. /*for styling box inside which button is placed*/
  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.