Get Latest Tricks Alert Daily
Follow Readers

Css3 Animated Buttton Without using Image - Smoot clickable


animated 3d css3 button
New Look New Button, yes it's a Css3 Button which is Really awesome. css can be used to jazzup a plain looking link button but css3 3D button call to action into a 3D depressible button. as for our css3 button. It uses css2 pseudo element to add a lower 3D side shadow to the link transition and style with css3 to complete the look.
Overcome a severe limitation of mozilla firefox, google chrome and safari browsers at he the time of writing code not supporting css3 transitions on pseudo elements, i use the "inherit" technique, so the 3D buttom is animated when user click on the button.

Css Code

Goto > Edit Template > Search ]]></b:skin> by pressing Ctrl+F
paste css code above ]]></b:skin> and save your template

.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: */
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;

.css3dbutton, .css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;

.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;

.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */

.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
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;

Html Code

Paste this code where ever you want

<a href="#" class="css3dbutton">Sign Up!</a>


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!



  1. thanks, visit back

  2. very informative articular, Thanks for sharing this

  3. Please more shares for this article.
    Call girls