Create a Pressed Button Effect with CSS

While redesigning my personal site I came across this easy to implement button CSS that gives the illusion of a button being pressed.

The HTML

Simply add a class to your link.

<a href="#" class="readmore">Click Here</a>

The CSS

This is where the fun stuff happens.

First just give the button it’s visual styling. In this case I’m duplicating the grey button effect from my home page slider.

Note the box shadow style. The y-axis distance is set to 3px, which gives the box element a 3px drop shadow on the bottom.

The Rollover

Now, on hover, you will want to again style the visual portion of the button. Then you will need to do two things:

• Position the link “relative” and assign the top to have 3 extra pixels.
• Define the box shadow again, only now set the value to “none”.

This removes the distance of the drop shadow and moves the button down to that equal distance.

.readmore {
background: #2f2f2f;
text-align: center;
display: block;
width: 250px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
.readmore:hover {
position:relative;
top:3px;
color: #fqq;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

In Action

Click Here

This code uses elements that may or may not work in IE7 and lower…oh well.