3-d Push Button Effect

Few years ago, we used 3-d buttons a lot because it was a nice effect to put on your website. In earlier days, it can only be created by using JavaScript and images. But now with the advent of CSS we can re-create 3-d buttons by using an element's border-style CSS attribute to outset. Taking it one step further the button can also appear depressed if desired, by switching from a border-style value of outset to inset. The below examples are 100% CSS based, not to mention lightweight:

CSS

<style type="text/css">
div#input a {
   display: block;
   border: 1px solid;
   border-color: #aaa #000 #000 #aaa;
   width: 8em;
   background: #718A8E;
   color:#FFFFFF;
   text-align:center;
   text-decoration:none;
   /*Set outline:none to Remove the dotted line, 
   this dotted line appear on click*/
   outline:none;
}

div#input a:hover{
   position: relative;
   top: 1px;
   left: 1px;
   border-color: #000 #aaa #aaa #000;
}
</style>

XHTML

<div id="input">
  <a href="#">Submit</a>
</div>

In the above CSS code, we have used width properties & hover effect. For hover effect, we have changed the background color & gave "position: relative" for left & top side. And gave 1px from top left. The "display: block" is being used in the above code because an inline element named “anchor tag” is used in the CSS, which affects some browser’s width properties, set border & color.

DEMO

Submit