Tutorial – CSS3 Buttons with no images

This tutorial covers the creation of CSS buttons with minimal markup and absolutely no images.

The final product

This is what we will be creating by the end of this tutorial. You only need some very basic knowledge in CSS to start rolling.

The solution.

The problem with creating rich-looking buttons for the web is that it tends to get really complicated and tricky. Designers have long dreaded rounded corners and gradients and that meant that they had to resort to using a few, if not several, images or jquery to achieve the effect. Techniques like sliding doors are cumbersome and not easily customizable.

The CSS3 solution is elegant and simple, but the catch is that it only works on modern browsers (You didn’t really think that this will work on IE, did you?). But it will will fall-back gracefully on IE and other older browsers.

The markup.

Let’s start with the html markup. This is pretty simple and neat. And of course, you can use this on anchors, divs or basically any other element.

<button class="blue-btn">Click here</button>

Step 1 – The basic CSS

We start out with the basic CSS for our button.

button.blue-btn{
	background: #2e8ce3;
	padding: 7px 30px;
  	font-size:13px;
	font-weight: bold;
	color:#fff;
	text-align: center;  
	border:solid 1px #73c8f0;
}

It should look like this now:

This is also how the fall-back will look like.

Step 2 – Gradients

Lets add those gradients now:

	background: -moz-linear-gradient(0% 100% 90deg,#2e8ce3, #73c2fd);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73c2fd), to(#2e8ce3));

This basically declares a linear gradient for the mozilla and webkit based browsers. Note that the order of the start and end colors differ for the two methods.

Step 3 – Rounded corners

Add these for the rounded corners:

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

This will ensure that the rounded corners will work across all the modern browsers.

Step 4 – Inner shadow

Let us add a white inset to have that protruding effect.

	box-shadow: inset 0 1px 0 0 #fff;
	-moz-box-shadow: inset 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 0 #fff;

This is the box shadow CSS3 property to achieve the shadow effect. The ‘inset’ parameter allows us to have inner-shadows. This will add a 1px white offset at the top of the button inside the border.

Add a darker color for the bottom border for better contrast:

	border-bottom-color:#196ebb;

Final step – Text shadow

This is optional, but it will add a nice contrast to our text.

	text-shadow: 0 -1px 0 #196ebb;

Conclusion

Feel free to experiment and try dabbling with other colors.

I hope that you found this tutorial helpful. Please leave your comments/suggestions below.

Check out my other tutorial covering the same subject.