Designing CSS3 Buttons

Designing CSS3 Buttons is an easy to add custom buttons to your website, without the need to use images. Here is a basic overview.

The Old Way

For years web designers were forced to use images for all custom buttons. There were many downsides to this way of designing. The main problems being:

1. Every we time we needed a button’s text to change, we would need a new image.
2. The elements were not semantic.
3. Load time increased, because websites would need to load more images.

The (Kinda) New Way

Once we started using CSS to style our buttons, this solved the problem, somewhat. We can design colorful, non-image heavy, semantic buttons. But what if you or your designer created a really awesome button. With gradients, rounded corners, and all that jazz? Well, back to using images you go!

The (New) New Way (ehh kinda new)

Designing CSS3 Buttons leaves us with a completely custom button, that is far more flexible. We can use special CSS3 techniques to style our buttons, and if the browser doesn’t support some techniques, the button will degrade nicely.

Let’s walk throughout he simple process.

Designing CSS3 Buttons

First, lets add some padding, change the font to a web-font, change the borders, and set the background color to a dark red. We’ll also add some height as well.

input[type="submit"] { font: 14px/18px ChunkFiveRegular, Arial, Helvetica, sans-serif; background: #7a3738; padding: 0 0 20px 2px; height: 1%; border: 1px solid #8d5455; border-width: 1px 0; }

Next, lets add some flavor to our text. Here we’ve added a text-shadow, and transformed the text to all uppercase.

input[type="submit"] { text-shadow: 0 1px 0 #170909; text-transform: uppercase; }

Now this is where the fun starts. lets add some CSS3 gradients and rounded corners. Make sure to use the proper vendor prefixes. And always apply the non-vendor style last.

input[type="submit"] { -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; background: #7a3738; background: -moz-linear-gradient(top, #7a3738 0%, #521b1c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a3738), color-stop(100%,#521b1c)); background: -webkit-linear-gradient(top, #7a3738 0%,#521b1c 100%); background: -moz-linear-gradient(top, #7a3738 0%, #521b1c 100%); background: -o-linear-gradient(top, #7a3738 0%,#521b1c 100%); background: linear-gradient(top, #7a3738 0%,#521b1c 100%); }

Finally, lets add some shadow to the button. Using box-shadow

input[type="submit"] { box-shadow: 0 0 6px rgba(0, 0, 0, 0.66); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.66); }

So what about browsers that done support CSS3?

Browsers that do not support certain CSS3 techniques, will degrade gracefully. Showing a completely functional button, styled with color to match our design. Will a user miss the rounded corners and gradients? Probably not. They still have a functional button.

If you have any thoughts, or other techniques, let me know in the comments.

Thanks!