3D Push Button Effect

This section contains css codes and other related material.

3D Push Button Effect

Postby Web Guru on March 24th, 2008, 12:57 pm

Back in the early days of the Web, 3D 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 retro and re-create this 3-d effect.

The main CSS commands you'll need are:

Code: Select all
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 other commands to achieve the desired presentation effect -- the only limit is your imagination!
User avatar
Web Guru
 
Posts: 68
Joined: March 24th, 2008, 7:59 am
Location: Lahore, Pakistan

Return to CSS - Cascading Style Sheet

Who is online

Users browsing this forum: No registered users and 0 guests

cron