CSS: Button Effect

Mouse Rollover effect:
This is the HTML:

<a class="button" href="#">Button 1</a>

Simple as that. Just a mere anchor element with a "button" class to distinguish it from other links, and the name of the button. The rest is handled by the CSS.

First of all we'll give our link the aspect of a real button:

a.button {
  display:block;
  width:100px;
  height:40px;
  text-align:center;
  background-color:#0C0;
}

With the display property set to "block" we can set the width and height of the element to arbitrary values (in our case, 100px and 40px respectively). This will also make sure the entire size of the element will be clickable, like a real button, instead of just the text.

We set a green background color and position the text at the center. You will notice the text is centered only along the width, but not the height. To completely center the text inside the button, we have to use the line-height property, which determine the height of the line of text, and the text will become vertically centered.

Making it work

To make our button a rollover button we need to use the :hover pseudo-class, which controls the state of an element when the mouse is over it. Here is the CSS code:

a.button:hover {
  background-color:#C00;
}

With the above rule, when the mouse is over an anchor element with a "button" class, the color of the button becomes red.

PRESSED BUTTON EFFECT WITH CSS

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.