Create Reusable Button Classes with CSS and Background Images

With CSS3 on the slow rise and Internet Explorer 6 on the (painfully slow) downfall, most of the time we as developers and designers are forced to use individual images for each button if we want cross-browser friendly, good looking buttons. Especially when it comes to ecommerce, this can sometimes add up to 20+ images. You’ve got buttons for Login, Checkout, Express Checkout, Update, Remove etc.

There are a few different ways to get around this. You see that rule book? Go ahead and throw it out the window. ANYTHING GOES IN ALEX’S KITCHEN.

1. Using a Linear Gradient

For the rest of this lesson, I’ll be using a 300px wide by 36px tall canvas. The reason it is so wide is because when a button gets wider, we don’t want it to run out of our background image.

Next, fill the background with a subtle gradient. For this example I used #292c63 for the bottom color and #404482 for the top color.

Since it is a linear gradient, we can create a 1px wide slice for our background that will repeat horizontally.

Now we can start adding our HTML and CSS. Our HTML is simple, I wrapped a container around my anchor tag to create some space without having to add more CSS rules to my button class.

	
		<div class="container">
			<a href="#" class="button">This is a link with a linear gradient</a>
		</div>
	

Applying the CSS

	
		.button {
			padding: 8px 20px;
			font-weight: bold;
			font-size: 15px;
			color: #fff;
			text-decoration: none;
			background: url(linear.jpg) repeat-x;
			border: 1px solid #6064a5;
		}
	

The code should be self explanatory but I’ll break it down anyway. The first line pads the anchor tag to create space between our background image and the text. By default, if we have even padding on the left and right, it will show up in the middle of our fancy button. The font will be bold, 15px in size, white, and will have no text decoration (i.e. underline). The background line tells us that our 1px image will repeat across the x axis. This will ensure that as long as our button is in width, the background will always repeat to the entire width. The border is just a slightly lighter purple than the top of the gradient.

So there we have it, a cross browser button that we can use anywhere in our ecommerce site only using a 1px image that repeats.

2. Using a Radial Highlight

Unless the site uses a lot of linear gradients already, I usually use a radial highlight for my buttons. Since it is radial, we aren’t able to have it repeat. This is when we have to create a wider image.

Let’s go back to our 300px by 36px document and fill it with the same dark purple we had earlier. Once we have that, we will create a new layer on top of our solid purple image.

With our white layer selected, we are going to use the brush tool. Choose a soft brush about 250 in size and a flow of 30%. We are going to start creating our highlight from the bottom of the image by clicking as many times as we feel fit. After four clicks this is what I ended up with.

Now that we have our gradient we can save it out and apply our new CSS rules. You’ll notice that the only thing different is the background’s rules. We have to align it in the center so the gradient will always start there.

	
		.button {
			padding: 8px 20px;
			font-weight: bold;
			font-size: 15px;
			color: #fff;
			text-decoration: none;
			background: url(radial.jpg) bottom center no-repeat;
			border: 1px solid #6064a5;
		}
	

3. Extending Our Buttons Further

Once we have a button class defined, we can start to extend them with images. For example, when I have a proceed to checkout button, I like to add an arrow to the right of the image.

Adding an Icon to Our Buttons

Let’s go back into photoshop and create ourselves a little arrow image. Once we’ve done that, save it out for web as a GIF to preserve the background transparency. The gif is about 20px by 20px.

Now that we have an arrow, we need to have a way to put it in the button. We’re going to change the code up a little bit and add a span tag around the anchor text. Our new code looks like:

	
		<div class="container">
			<a href="#" class="button"><span>Proceed to Checkout</span></a>
		</div>
	

And a new selector has been added to our CSS:

	
		.button span {
			background: url(arrow.gif) center right no-repeat;
			padding-right: 35px;
		}
	

Adding Rounded Corners

As of now, CSS rounded corners only work in Firefox and webkit browsers. But if a visitor does see the button in IE, it won’t break, the corners just won’t be rounded. So just for fun, let’s add a rounded corners class that we can use to extend our buttons even further.

	
	.button {
		padding: 8px 20px;
		font-weight: bold;
		font-size: 15px;
		color: #fff;
		text-decoration: none;
		background: url(radial.jpg) bottom center no-repeat;
		border: 1px solid #6064a5;
	}
	.button span {
		background: url(arrow.gif) center right no-repeat;
		padding-right: 35px;
	}
	.rounded {
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
	}
	

To apply this, we simply add another class to our anchor tag:

	
		<a href="#" class="button rounded">Login</a>
	

Radial with a .png Image (Not IE6 Compatible)

Aside from a pet monkey, the only thing I wish for everyday is that IE6 would just die. Surprisingly my silent hoping hasn’t helped speed up the process, but if you can ignore IE6 compatibility, you can use a .png with transparency to create the same radial effect and reuse it for different colors.

Let’s go back to our same radial gradient image, but before we Save for Web, we are going to hide the colored background. You should now be looking at a mostly transparent background, but with a semi-transparent radial gradient on the bottom. Export it as PNG-24 to preserve the alpha transparency.

Our new CSS is updated to reflect the new background image. You will also notice that I added some classes with a background color to each of them. This way we can tell the CSS to use that background color, then overlay the .png on top of it.

	
		.button {
			padding: 8px 20px;
			font-weight: bold;
			font-size: 15px;
			color: #fff;
			text-decoration: none;
			background: url(radial.png) bottom center no-repeat;
			border: 1px solid #6064a5;
		}
		.button span {
			background: url(arrow.gif) center right no-repeat;
			padding-right: 35px;
		}
			.red {
				background-color: red;
			}
			.green {
				background-color: green;
			}
			.black {
				background-color: black;
			}
			.blue {
				background-color: #00065F;
			}
			.rounded {
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
			}
				.container {
					padding: 20px 0;
				}
	

And our HTML is updated to use the new classes:

	
		<div class="container">
			<a href="#" class="button black">This is a link with a linear gradient</a>
		</div>
		<div class="container">
			<a href="#" class="button red rounded">Add to Cart</a>
		</div>
		<div class="container">
			<a href="#" class="button green"><span>Proceed to Checkout</span></a>
		</div>
		<div class="container">
			<a href="#" class="button blue rounded"><span>Checkout Rounded Arrow</span></a>
		</div>
	

A Not-So-Conclusive Conclusion

Creating button classes can be a huge time saver, and you can really start to get creative with them. Instead of an arrow, you may want to have a cart icon or a dollar sign etc. If you find a bug or have a question, please let me know.

Want more, follow Alex on Twitter!