One of the elements on a web page that a visitor’s attention is drawn to first is in many cases a button. Whether it is a “Add to cart”, “Leave a comment” or “Subscribe” button, they all are designed to stand out from the rest of the design and make the visitor click on them. Unfortunately buttons are image-based in 99% of the cases and the use of complicated CSS sprites is often required to fluently switch between different states of interaction, but a new age dawns with the arrival and broader browser-support of CSS3.

In this Tutorial we’ll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. We’ll use a multitude of CSS3 properties, such as @font-face, text- and box-shadow, gradients and border-radius.

Button #1

Photoshop

This simple, yet beautiful and effective button is based on a rounded, 250px wide and 34px high rectangle (the dimensions are the same for all buttons in this tutorial) with a border-radius of 5px. The following layer styles were applied to the button:

The font used for the text is Airstream, which is licensed for the usage with @font-face. Its size is set to 30px, a very light blue (#e5edff) is used as color and a simple drop-shadow (as shown below) is applied to it.

CSS3

Because the HTML part of the code is very simple I’m not giving any code examples for that. All you need is a HTML document that refers to your CSS file and has an input tag with an id (in our case a submit button with the id button1).

The styling of the input tag starts with some general and regular CSS properties such as height, width, border and background, followed by the CSS3 Styling.
We begin with the creation of a linear CSS3 Gradient for Firefox as well as Webkit Browsers.

Remark

CSS3 Gradients are implemented quite differently by Gecko and Webkit Browsers. The -moz- version of CSS3 Gradients is much easier, even though Firefox supports them only since its latest release (3.6). It is almost impossible to create a nice radial gradient for Webkit Browsers (I got it working with a trial and error method).

After that we define the border-radius to achieve the rounded corners – this is simple and straightforward, it just needs to be defined separately for Firefox and Webkit Browsers.

Finally we’ll add a soft shadow around the button with box-shadow. The first value indicates the x-offset, the second the y-offset, followed by the blur radius and finally the shadow color.

Quicktip

You might have noticed that I defined alongside with the default properties -moz- and -webkit- also a unpreceded version of the CSS3 properties. This currently doesn’t anything, but should enable the feature in most browsers once CSS3 is officially released and widely implemented. Like this we make our code future-ready.

Finally we only need to set our previously defined font-family (and appropriate fallbacks), its size, color and we’re also adding another CSS3 property: text-shadow.

Text-shadow works similar to box-shadow (x-offset, y-offset, blur radius, color), but in this specific case we used the RGBA model (another CSS3 feature) to define the color. This allows us to define a transparent color to get a softer color (rather than choosing a milder gray, which is absolutely not the same).

RGBA is based on the RGB color model and requires four values: The red, green and blue amounts (between 0 and 255) and the alpha channel (in decimal values, e.g. 0.1 = 10% opacity), which indicates the opacity.

Now we have a beautiful button and all that’s missing is some interactivity. That’s why we’re going to define the hover, focus and active state of the button. You can let your creativity run free here and manipulate the values we defined to your own desires. By adding CSS3 transitions you can even add some animation.

Below I lightened the border color for the hover and focus states to highlight the button and reversed the gradient and smalled down the text-shadow in case the user clicks on the button.

Button #2

Photoshop

The second button is a little more glossy and might even be a little bit outdated, but it is a great way to show a gradient with more than two colors. The dimensions are the same as the one’s of the first button (250px on 34px), but it uses a radius of 20px for its rounded corners and the following blending options:

This time we’re using the HighlandGothic font with a size of 20px and an orange color (#ff7d00). The following drop-shadow is applied to it:

CSS3

We start once again by defining a new font-family with @font-face, just as we did it with our first button, followed by some general CSS properties.

Next on the list is the more complex gradient with four color values, a bigger border-radius and a box-shadow, which actually is more of an outer glow than a shadow because it uses RGBA to define a white with an opacity of 50%.

The text is styled as before, but due to the negative y-offset of our text-shadow we achieve an effect that resembles an inner-shadow.

Button #3

Photoshop

Our last button basically explodes with subtlety (or is it implode?) and would fit perfectly into a very simple design without losing its attractiveness.
It has the original dimensions of 250px on 34px, uses a very small radius of 3px and the following layer styles:

Note this is the font we used, 24px the font-size and plain white (#fff) the color. A simple outer glow (see image below) helps the button to stand out on the dark background.

CSS3

The CSS is similar to the two other buttons, so I’m not going to repeat everything again.

The only difference is the usage of radial gradients instead of linear ones and the usage of a white with an opacity of 50% as text-shadow to recreate the outer glow of the text. The radial gradient is fairly simple to implement for Firefox and nearly impossible in Safari. If nobody is going to write a proper tutorial on how to do this soon I’ll have a deeper look into it and write one on my own.

Conclusion

I think that this was quite a good demonstration of how powerful and versatile CSS3 actually is (or is going to be) and how we can avoid the usage of images and CSS sprites with a little bit of code.

These buttons will display properly and in their full beauty in the latest version of Safari, Chrome and Firefox (only 3.6, not 3.5, which doesn’t have support for CSS3 Gradients), but degrade more or less gracefully and display without the CSS3 features in all other browsers, including IE6 (the custom fonts work in all browsers though). Make sure to set regular background-colors before adding the gradients, so it will display properly in all browsers.

It’s cool. Really cool. In a new browser. But, lets get real. It will be a very long time before we can use CSS3 confidently and know that the vast majority of our users are getting the full experience. IE6 is 9 years old and we still have to provide support for it.

You are right, we can’t just start using CSS3 without thinking about older browsers without support, but we can use it already to some extend as long as we make sure that appropriate fallbacks are available.

In case of these buttons – they work in all browsers, just don’t look the same and I think as long as the functionality is till preserved we can actually use them…

I totally agree with you, Ximi. It would be a shame NOT to use CSS3 in IE or some other browser. The only between CSS3 in IE6 and IE8 is that a button can’t have any CSS-generated rounded corners in Internet Explorer 6. And that’s it. I don’t think that’s really a big issue, right?

As long as the functionality behind the buttons remain, it’s all good with me.

This is incredibly useful , but a little tweaking here and there could give a much nicer effect. I am taking the liberty of adding this article to my css aggregator site at CSSFind.com. Hope thats ok with you.

That’s an interesting article about CSS3. From the tutorials you’ve shared, I can see that CSS3 is becoming more flexible for the purpose of developers. I’d like to try CSS3 but is it supported by all browsers? Thank you for sharing the short tutorials!

I just tried one of these pieces of codes in my local computer and see how css3 image-less button looks like and it is really cool. You don’t have to go through a lot of photoshop work. Thanks. This is really useful.

For anyone who is insane about IE support, IE has its own gradient and dropshadow support via the filter property. You could use this to get pretty close IE support for the buttons, though I’m not sure if dropshadows support the alpha channel.

Nifty buttons but I’d have to say the simple grey version you show last doesn’t really strike me as outstanding. I think the shiny one with the rounded edges and the diner-style font looks to me to be the best. Thanks! Jim´s featured post: Effect helps businesses optimize web ROI