5 Techniques to Style Buttons using Images and CSS

5 Techniques to Style Buttons using Images and CSS


5 Techniques to Style Buttons using Images and CSS
Demonstration Download

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.

Download
<a href="#"><img 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.

Download
<a href="#"><img 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).

Download
<a href="#"><img 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.

Download
<a href="#"><img 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.

This Button Will Grow!
<a href="#"><img 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;
	}
Demonstration Download

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! :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

10 comments

Inside the Webb
Tue, 13th October 2009
Awesome list, and really easy to follow tutorials. Thanks for the post! Reply
web2000
Tue, 13th October 2009
Good article. I like how you went from least flexible to most flexible as you went down the list. Maybe you can do a follow up post to show how to style buttons in forms? Reply
Fredrik Lind
Thu, 15th October 2009
Cool buttons, but it would be cooler with an active state also. Reply
Dusty
Thu, 15th October 2009
Here is one i did that works niceley with .net web controls
http://laymensterm.blogspot.com/2009/10/expandable-image-button.html Reply
John
Sat, 17th October 2009
Your tutorial is flawed. For those anchor\'s to be search engine friendly you should have included the \"title\" attribute to them to describe where they are going, thus making them more relevant to search engines.

Also when styling the \":hover\" state of your anchors there is no reason to double up on CSS properties. All you are doing is creating a larger CSS file that will require more resources so load on the client browser and serve the client from the server.

(e.g. - if you assign \"text-decoration: none\" or \"padding-right: 34px\" to your anchor there is no reason to assign that same property to the hover state since CSS works in hierarchy fashion, meaning it will inherit the previous states properties.)

It might sound nit picky, but when you build a site that delivers over a million page views a day those few extra KB of data REALLY start adding up. Reply
Color Business Card
Fri, 21st May 2010
Wow! these are very affective call to action buttons! I'm sales will boost in no time with that kind of CTA button! Reply
dewi
Thu, 10th March 2011
nice tutorial..tanks Reply
Andrew Wilson
Fri, 11th May 2012
The last button (This button will grow) is a lie. It won't grow because you have set the width in the CSS.

if you remove the width and then set the display to be inline-block then you can have a button that will shrink and grow to the correct size for the text.

/*width:300px;
display:block;*/
display: inline-block;

fixed!
Reply
satish kumar
Fri, 25th May 2012
thank u sir,
its very helpful
Reply
Web Master
Sun, 29th July 2012
good job :") Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement