Neat Redesign

In this tutorial we’ll review the process of creating 3D buttons with CSS. The buttons are based on text only (no images) with CSS styling. See an example below:

Submit

The markup

The HTML markup is pretty straight-forward:

<a href="#">Submit</a>

CSS markup is pretty simple as well:

a {
text-decoration:none;
font-weight:bold;
border:3px solid;
padding:2px;
border-color:#6cf #2af #2af #6cf;
background:#9df;
}
a:hover {
border-color: #2af #6cf #6cf #2af;
}

Explanation

Here is a lowdown on how we create the 3D CSS button:

• first we remove the underline with text-decoration:none
• then we tell the browser to display the text as bold
• later, we specify the width and type of the border (you are free to choose the size and type of the border to suit your visitors)
• afterwards, we provide the padding for the text to look like a button, not like a text with a border
• furthermore, we make the button look like a 3D button: we specify the border colors (top left are lighter than right and bottom)
• and finally, we create a hover state pseudo class with a:hover and change the colors (top left are darker now than the right and bottom borders)

You can add a background color and change the text color to adapt the button to your site as well.

Rounding up

Check out the 3D CSS button example.

The example is pretty bullet-proof, meaning that it uses no hacks and looks relatively the same in all browsers.

Related posts:

• Switching to full posts in RSS feeds
• Advanced CSS techniques
• Redesigning a site to make it load faster

This entry was posted on Friday, June 30th, 2006 at 5:21 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.