Post
Ask Question

3D Depressible Button using CSS

Introduction

 
Introducing 3-D Depressible Button using CSS-3.That is normally called the “CALLED-TO-ACTION button”.
 
Use 
  1. We can use this button for creating a very good looking “LOG-IN BUTTON” on our page.
  2. 3D side of the button is animated when the user presses down on the button.
  3. Default "depth" of this 3D effect is 12px. If you need to increase or decrease this value, change the "12px" value that occurs 3 times in the CSS.
Implementation
 
CSS Code 
 
Put this CSS code in the head section:
  1. <style>  
  2. a.css3dbutton {  
  3.      background: darkred;  
  4.      /* background color of button */  
  5.      color: white;  
  6.      text-decoration: none;  
  7.      font: bold 28px Arial;  
  8.      /* font size and style */  
  9.      position: relative;  
  10.      top: 0;  
  11.      /* anchor main button's position */  
  12.      bottom: -12px;  
  13.      /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */  
  14.      margin-bottom: 12px;  
  15.      -moz-box-shadow: 0 -15px 5px darkred inset;  
  16.      -webkit-box-shadow: 0 -15px 5px darkred inset;  
  17.      box-shadow: 0 -15px 5px darkred inset;  
  18.      -moz-transition: all 0.2s ease-in-out;  
  19.      -o-transition: all 0.2s ease-in-out;  
  20.      -webkit-transition: all 0.2s ease-in-out;  
  21.      transition: all 0.2s ease-in-out;  
  22. }  
  23.   
  24. a.css3dbutton,  
  25. a.css3dbutton:after {  
  26.      display: inline-block;  
  27.      padding: 10px 15px;  
  28.      /* vertical and horizontal padding of button */  
  29.      -moz-border-radius: 8px/15px;  
  30.      -webkit-border-radius: 8px/15px;  
  31.      border-radius: 8px/15px;  
  32.      outline: none;  
  33. }  
  34.   
  35. a.css3dbutton:after {  
  36.      /* pseudo element to construct 3D side of button */  
  37.      content: "";  
  38.      position: absolute;  
  39.      padding: 0;  
  40.      z-index: -1;  
  41.      bottom: inherit;  
  42.      /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */  
  43.      left: 0;  
  44.      width: 100%;  
  45.      height: 100%;  
  46.      background: #6e0e0c;  
  47.      /* background color of 3D effect */  
  48.      -moz-box-shadow: 1px 0 3px gray;  
  49.      -webkit-box-shadow: 1px 0 3px gray;  
  50.      box-shadow: 1px 0 3px gray;  
  51. }  
  52.   
  53. a.css3dbutton:hover {  
  54.      -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;  
  55.      -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;  
  56.      box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;  
  57.      background: #bc3835;  
  58.      /* background color when mouse rolls over button */  
  59. }  
  60.   
  61. a.css3dbutton:active {  
  62.      top: 12px;  
  63.      /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */  
  64.      bottom: 0;  
  65.      -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;  
  66.      -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;  
  67.      box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;  
  68. }  
  69. </style> 
HTML code
 
Place this HTML code in body section:
  1. <a href="#" class="css3dbutton">Sign Up!</a>