CSS : 3-d push button effect

3-d push button effect

Back in the early days of the web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now with the advent of CSS we can go all retro and re-create this effect:

The main CSS commands you'll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect - the only limit is your imagination!

Other Topics

CSS : Vertically aligning with CSS ,CSS : Positioning within a container ,CSS : Hiding text using text-indent ,CSS : The * HTML hack ,CSS : Minimum width for a page ,CSS : Same navigation code on every page ,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE? ,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector