5 Techniques to Style Buttons using Images and CSS

1. Normal Image Button with Link

This would be the easier way to make an image button. Basically, we just have to create the image and wrap it with anchor tag.

<a href="#"><img data-src="btn_red.gif" width="228" height="49" alt="Download"/></a>

<a href="#" class="btn1">Download</a>

<a href="#" class="btn2">Download</a>

<a href="#" class="btn3">Download</a>

<span class="btn4"><a href="#">This Button Will Grow!</a></span>

2. Image Button + Search Engine Friendly

This is the most commonly used by most people. Instead of wrapping the image, we wrap the text and using CSS to style it. We need to set the width and height and most importantly, use the text-indent to hide the text link.

Compared with the first one, it looks exactly the same, but if you disabled css, you will see the difference.

<a href="#"><img data-src="btn_red.gif" width="228" height="49" alt="Download"/></a>

<a href="#" class="btn1">Download</a>

<a href="#" class="btn2">Download</a>

<a href="#" class="btn3">Download</a>

<span class="btn4"><a href="#">This Button Will Grow!</a></span>

a.btn1 {
	display:block;
	width:228px;
	height:49px;
	background:url(btn_red.gif) 0 0 no-repeat;
	text-indent:-999em;	
}

3. Image Button + Search Engine Friendly + CSS Sprite

This button combine the technique we used previously and also further enhance with CSS Sprite to create the hover effect. CSS Sprite is a very efficient way to reduce the amount of HTTP request to the server and it's used by most famous and high traffic websites such as apple and digg. For more about CSS Sprite, you can check out my previous post - 15 Ways to Optimize CSS and Reduce CSS File Size

So, this time, we will use the pseudo name :hover for the anchor tag, on mouse hover, it will change the background position (flip it to other image).

<a href="#"><img data-src="btn_red.gif" width="228" height="49" alt="Download"/></a>

<a href="#" class="btn1">Download</a>

<a href="#" class="btn2">Download</a>

<a href="#" class="btn3">Download</a>

<span class="btn4"><a href="#">This Button Will Grow!</a></span>

a.btn2 {
	display:block;
	width:228px;
	height:49px;
	background:url(btn_sprite.gif) 0 0 no-repeat;
	text-indent:-999em;	
}
	
a.btn2:hover {
	background:url(btn_sprite.gif) 0 -51px no-repeat;
}

4. Image Button + Search Engine Friendly + CSS Sprite + Custom Text

The fourth one, instead of embed text to the image, we remove it and create an empty image. The benefit of this is, you don't have to create different buttons with different captions on it. We will make it customizable by removing the text-indent and adding extra styling to the font.

<a href="#"><img data-src="btn_red.gif" width="228" height="49" alt="Download"/></a>

<a href="#" class="btn1">Download</a>

<a href="#" class="btn2">Download</a>

<a href="#" class="btn3">Download</a>

<span class="btn4"><a href="#">This Button Will Grow!</a></span>

a.btn3 {
	display:block;
	width:228px;
	height:49px;
	background:url(btn_sprite_blue.gif) 0 0 no-repeat;
	text-align:center;
	font-size:24px;
	font-weight:700;
	text-decoration:none;
	color:#fff;
	font-family:arial;
	line-height:35px;
}
	
a.btn3:hover {
	background:url(btn_sprite_blue.gif) 0 -51px no-repeat;
	color:#666;
}

5. Image Button + Search Engine Friendly + Custom Text + expandable

Lastly, an expandable image, but this time, we will not able to use CSS Sprite. In IE, we can't use :hover in span, we can only use it on anchor element. So, we will have to remove it.

We are using a span and inside the span will be the anchor tag.

<a href="#"><img data-src="btn_red.gif" width="228" height="49" alt="Download"/></a>

<a href="#" class="btn1">Download</a>

<a href="#" class="btn2">Download</a>

<a href="#" class="btn3">Download</a>

<span class="btn4"><a href="#">This Button Will Grow!</a></span>

	span.btn4 {
		background:url(btn_green_left.gif) 0 0 no-repeat;	
		padding-left:34px;
		text-align:center;
		font-size:24px;
		font-weight:700;
		font-family:arial;
		line-height:35px;
		display:block;
		height:49px;
		width:300px;

	}
	
	span.btn4 a {
		background:url(btn_green_right.gif) top right no-repeat;	
		padding-right:34px;	
		text-decoration:none;
		color:#fff;
		display:block;
		height:49px;
	}

	span.btn4 a:hover {
		background:url(btn_green_right.gif) top right no-repeat;	
		padding-right:34px;	
		text-decoration:none;
		color:#799e35;
		display:block;
		height:49px;
	}

Final words

I hope this article will help you all. Please bookmark it, share it and spread it to the rest of the web designers and developers! :)

• TAGS:
• CSS
• HTML
• Tips
• Tutorial