Comments on: Simple CSS 3D Button

By: CSSnewbie

CSSnewbie — Sun, 03 Feb 2008 16:03:32 +0000

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!

By: Dave

Dave — Wed, 30 Jan 2008 08:48:59 +0000

@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.

By: Jermayn Parker

Jermayn Parker — Wed, 30 Jan 2008 06:11:54 +0000

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!

By: thak’s cool links » Simple CSS 3D Button

thak’s cool links » Simple CSS 3D Button — Tue, 29 Jan 2008 22:51:59 +0000

[...] Dave Woods – HTML, CSS, Web Design » Simple CSS 3D Button.

By: Joshua

Joshua — Tue, 29 Jan 2008 18:49:16 +0000

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;

By: Dave

Dave — Tue, 29 Jan 2008 08:48:40 +0000

@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.

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

Tue, 29 Jan 2008 00:31:27 +0000

[...] While I was browsing through dzone today, I stumbled on this 3d button css tutorial by Dave Woods. [...]

By: Edward Turtle

Edward Turtle — Mon, 28 Jan 2008 22:40:00 +0000

You should use the CSS with ids or classes to make it more specific. But other than that its cool.

By: ilan f

ilan f — Mon, 28 Jan 2008 22:33:19 +0000

why don’t you just use INSET and OUTSET
with the borders?

By: Brian Rock

Brian Rock — Mon, 28 Jan 2008 17:48:24 +0000

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.