Introducing
3-D Depressible Button using CSS-3.That is normally called the “CALLED-TO-ACTION
button”.
Use
-
We can use
this button for creating a very good looking “LOG-IN BUTTON” on our page.
-
3D side of
the button is animated when the user presses down on the button.
-
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:
- <style>
- a.css3dbutton {
- background: darkred;
-
- color: white;
- text-decoration: none;
- font: bold 28px Arial;
-
- position: relative;
- top: 0;
-
- bottom: -12px;
-
- margin-bottom: 12px;
- -moz-box-shadow: 0 -15px 5px darkred inset;
- -webkit-box-shadow: 0 -15px 5px darkred inset;
- box-shadow: 0 -15px 5px darkred inset;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -webkit-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
-
- a.css3dbutton,
- a.css3dbutton:after {
- display: inline-block;
- padding: 10px 15px;
-
- -moz-border-radius: 8px/15px;
- -webkit-border-radius: 8px/15px;
- border-radius: 8px/15px;
- outline: none;
- }
-
- a.css3dbutton:after {
-
- content: "";
- position: absolute;
- padding: 0;
- z-index: -1;
- bottom: inherit;
-
- left: 0;
- width: 100%;
- height: 100%;
- background: #6e0e0c;
-
- -moz-box-shadow: 1px 0 3px gray;
- -webkit-box-shadow: 1px 0 3px gray;
- box-shadow: 1px 0 3px gray;
- }
-
- a.css3dbutton:hover {
- -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
- -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
- box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
- background: #bc3835;
-
- }
-
- a.css3dbutton:active {
- top: 12px;
-
- bottom: 0;
- -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
- -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
- box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
- }
- </style>
HTML code
Place this
HTML code in body section:
- <a href="#" class="css3dbutton">Sign Up!</a>