Dave Woods - Freelance Web Design Warwickshire

Simple CSS 3D Button

Creating 3D buttons is usually dealt with by using images but within this very simple tutorial, I’ll explain how regular links can be styled to look like 3D buttons using just a little CSS.

Hover over me

HTML

The HTML for this tutorial couldn’t be much simpler. All you need is a regular link.

<a href="http://dave-woods.co.uk">Hover over me</a>

CSS

And the CSS for this is also fairly simple but I’ll explain what effect each value is having on our button for any beginners to CSS.

a, a:link {
float: left;
background-color: #F00;
padding: 10px;
border-top: #FF8585 2px solid;
border-right: #410000 2px solid;
border-bottom: #410000 2px solid;
border-left: #FF8585 2px solid;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
a:hover {
border-top: #410000 2px solid;
border-right: #FF8585 2px solid;
border-bottom: #FF8585 2px solid;
border-left: #410000 2px solid;
}

The float on the link is used as we may want to use margin’s on the link at some point to position the button. If this isn’t applied then any margin’s will be ignored due to anchor tags being inline elements.

The background colour should be self explanatory, as should the padding of 10px which just creates the colour and spacing within the button itself.

Next is the borders. You’ll need to change the values of these depending on the colour of your button but the theory behind this is that the top and left borders should be lighter than the background colour whilst the right and bottom borders will need to be darker. This gives the button the 3D effect as it appears light is being shone on the button from the top left of the page.

The color, text-decoration and font-weight should also be self explanatory as these are being use to style the text within the button.

Finally, we use the hover of the anchor to style the button when the mouse moves over the link. I’ve simply reversed the colours of the border so that now the button appears to be in a down state. You could also change the background colour to make this even more dramatic but for the colours I’ve used, just changing the border colours seems to be sufficient.

Summary

Maybe you were expecting this to be much more complicated but by using the correct colours on borders along with a background colour, you can easily achieve a nice 3D effect without using a single image.

11 comments on “Simple CSS 3D Button

  1. Brian Rock

    Nice tip, and good use of simple coloring to achieve a cool effect. This could probably be enhanced if you used a gradient background for the actual button – helping reinforce the idea that light is shining on the button’s surface.

  2. Pingback: Web Cash » Blog Archive » » How to Create a 3D Button Using CSS and a Gradient Image

  3. Dave Post author

    @ilan – That’s a good point. You don’t have as much control with the colour though the consistency cross browser isn’t great which is what puts me off using them at the moment. This method works cross browser and renders exactly the same… call me picky.

    @Edward – I completely agree, I’d always use a container to target the link or if that wasn’t possible apply a class to the link itself to ensure that only the correct link was being targetted. But for the purpose of the tutorial, I tried to keep it as simple as possible.

  4. Joshua

    Nice example. Something that I usually do with my buttons is to shift the border width by 1px on hover to give the impression of button movement. In my experience, the movement helps to catch the user’s eye a little more than just changing the border colors

    Using your code:

    a, a:link {
    float: left;
    background-color: #F00;
    padding: 10px;
    border-top: #FF8585 2px solid;
    border-right: #410000 3px solid;
    border-bottom: #410000 3px solid;
    border-left: #FF8585 2px solid;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    a:hover {
    border-top: #410000 3px solid;
    border-right: #FF8585 2px solid;
    border-bottom: #FF8585 2px solid;
    border-left: #410000 3px solid;

  5. Pingback: thak’s cool links » Simple CSS 3D Button

  6. Jermayn Parker

    Very cool indeed!!

    @Joshua – Do you have an example of this moving button? I personally am a bit skeptical of the usability of that effect. So please prove me wrong!

  7. Dave Post author

    @Joshua – Yeah that works quite well, it’s not all that different but does make the effect a little more extreme

    @Jermayn – Thanks, Joshua’s maybe given the wrong impression by using the word “movement”. All he’s done is increased the width of the border for two of the sides and then reversed them for the hover effect so that the hover appears a little deeper.

    There’s no problem with doing that from a usability perspective.

  8. CSSnewbie

    Clean, simple, and to the point. Just the way I like em. 🙂

    Although I would suggest that, instead of making your state change on :hover, you might save it for :active. Most buttons change a little on the hover state, but they don’t actually depress until clicked (the active state).

    Great work!