Link image buttons with CSS

Works with Chrome, Internet Explorer 8, Firefox, Safari

I couldn’t find a good tutorial online to do this with, so I finally sat down and figured it out myself. I wanted a way to easily add an image background to my links to make them look like image buttons, but I didn’t want to use forms and I didn’t want to have a static image. I wanted a button that would expand correctly if I had longer text .

Step by Step

First things first, open up you html page and put the following text in the <body> tag somewhere:
<a href=”www.allebrum.com” class=”blueButton”>Learn More</a>
Next, download these three images and upload them to your “images” directory. (Right-click and “Save As…”)  
Now add the following CSS to the <head> tag of your html file.

<style type=”text/css”>

.blueButton {
display:inline-block;
height:24px;
background:url(“/images/blue-button_02.png”) repeat-x;
position:relative;
}
.blueButton:before{
display:block;
height:24px;
width:11px;
position:absolute;
left:-11px;
top:0px;
background:url(“/images/blue-button_01.png”) no-repeat;
content:’ ‘;
}
.blueButton:after{
display:block;
height:24px;
width:11px;
position:absolute;
right:-11px;
top:0px;
background:url(“/images/blue-button_03.png”) no-repeat;
content:’ ‘;
}

</style>

Your html page should look like this now:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS Image Buttons</title>

<style type=”text/css”>

.blueButton {
display:inline-block;
height:24px;
background:url(“/images/blue-button_02.png”) repeat-x;
position:relative;
}
.blueButton:before{
display:block;
height:24px;
width:11px;
position:absolute;
left:-11px;
top:0px;
background:url(“/images/blue-button_01.png”) no-repeat;
content:’ ‘;
}
.blueButton:after{
display:block;
height:24px;
width:11px;
position:absolute;
right:-11px;
top:0px;
background:url(“/images/blue-button_03.png”) no-repeat;
content:’ ‘;
}

</style>

</head>
<body>

<a href=”www.allebrum.com” class=”blueButton”>Learn More</a>

</body>
</html>

You should get something that looks like this: 

And that’s how you do it.  Now everytime you assign to a link with the class=”blueButton”, it has a nice button image background.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: