Inference

I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3. And this is what I ended up with.

I want to go into detail on the steps I took to create the button and the effects that make it work.

The Devil is in the Details

The whole idea is to use a combination of subtle effects to create a three dimensional object. Mike Rundle covers some of the ideas used here in his post about subtlety in interfaces. I’m hoping to expand a bit more on that. The idea is that:

• The button is set into the canvas.
• The texture of the button is different from the canvas and the surface is slightly raised.
• And the text of the button is pressed into it.

Lets take a deeper look at the button and the various effects that we use to create this idea. The HTML used for the button is a bit excessive, but it will make sense when we go into detail.

<a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>

Now onto the styles.

1. A simple gradient that is lighter at the top to show that the light source is above it and the surface is slightly raised. We use a 1px width background image for this.

a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;
}

2. A lighter border around it to show that light is reflecting off the edges. We use the CSS3 rgba property for this. We need the alpha blending because the reflected light is far more visible at the bottom than the top.
3. A hard 1px top border to show that light reflects off the top edge more than the other edges.

a.button b.m {
	border-width: 1px;
	border-style: solid;
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}

4. A lighter 1px bottom border to create the effect that the button is sitting right in the canvas.

a.button {
	border-width: 1px;
	border-style: solid;
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
}

5. A 1px border around the button to show the shadow of the button on the canvas. Again using the rgba.

a.button b.o {
	border: 1px solid rgba(0, 0, 0, 0.56);
}

6. And finally the shadow on the button text to show that it is pressed into the surface.

a.button b.m b {
	text-shadow: 0 1px 0 #DDD;
	color: #262626;
}

The State of Buttons

I like adding hover states to my buttons and the simplest way is to lighten the background color of the button. For the active or mouse down state of the button the effect we are trying to achieve is that of a raised surface pressed inwards. Hence, the lighting of the button should reflect that. Now there are a couple of different ways to do this.

I like the idea where the surface is pressed in, but the top edge doesn’t move. Instead of having the entire button moving in, just the raised part gets pressed in. We go from a convex shape to a concave shape when it is pressed.

Lets look at it in detail again.

1. Flip the gradient from before. The darker shade of the gradient is darker than the darkest shade of the previous gradient. This is important because the light hitting the bottom of a convex shape should reflect more than the light hitting the top of a concave shape.

a.button:active b.m {
	background-position: 0 -160px;
}

2. A light top border to emphasize that the top edge doesn’t move when the shape of the surface changes.
3. The bottom border is lighter as well since the bottom edge doesn’t move either.
4. The borders of the side are a bit lighter, but not very much since they do move with the surface.

a.button:active b.m {
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}

Show and Tell

The result is a great looking button with CSS3. Below is a live demo of it tested on Firefox 3.6, Safari 4 and Chrome. On IE8 the rounded corners and active state are missing, and I haven’t tested it on Opera yet. If you do either of them, please ping me on Twitter and let me know.

Below is most of the CSS and here is the image sprite that is used. I use the yui reset CSS on the page so it might be a bit different for you.

a.button {
	text-decoration: none;
	border-color: transparent transparent #ECECEC; /** rgba fallback **/
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
	cursor: pointer;
	outline: none;
}
a.button:hover {
	text-decoration: none;
}
a.button,
a.button b.o,
a.button b.m {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	display: block;
}
a.button b.o {
	border-color: #5A5A5A; /** rgba fallback **/
	border-color: rgba(0, 0, 0, 0.56);
}
a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;
	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover b.m {
	background-position: 0 -80px;
}
a.button:active b.m {
	background-position: 0 -160px;
	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button b.m b {
	display: block;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 0 1px 0 #DDD;
	color: #262626;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}

I use the innermost b tag in some other buttons to add an icon to the background. The b.m tag is required because the alpha blending for the b.o border needs to have its own “layer”. Otherwise the b.o border would be on top of the background image and the shading would change according to it.

I am hoping that by going into the detail you can use these techniques in your designs and as Mike mentions in his post; think about your designs in 3D. It is less about using the specific border effects and more about using them together to achieve an overall look.

Notes

I would love to hear your feedback and comments; just catch me on Twitter.

Also, check out zurb’s super awesome CSS3 buttons. They have a take on CSS3 buttons and the buttons are super awesome!

Share

Please do share this on Twitter.

Updates

I have received some really impressive feedback for this post. And I am glad that people have taken my ideas further and have done a great job with it. Here are some of the ones that I found. Please let me know on Twitter if I am missing some.

• Using only 1 input element by @dtinth. Tested on Firefox 3.6.3.
• Using a only 1 anchor element by @mattwiebe. Tested on Firefox 3.6, Safari and Chrome.
• Gmail/Twitter/OSX Style Buttons with CSS by @drewjoh. Tested on Firefox 3.6, Safari and Chrome.
• Apple-style buttons using CSS3 and jQuery by @d13design.
• CSS3 Imageless Gradient Buttons by @karlbowden.

Thanks to @mliao for reading over this post.