Click the image above to see the finished live example from the video.
Welcome to part 2 of our Call To Action Button tutorial. If you haven’t watched Part 1, I’ve already designed our button graphics in Photoshop. After designing the buttons, I then removed the text, and cropped all the white space, to create the CSS Sprite image that we need for part 2, where I’ll be adding the text back in with HTML & CSS .
Having Real Text call to action buttons is not only great for SEO, but it also allows you, the designer, to use the buttons multiple times and easily adjust the button text.
I should also point out that there are endless ways of successfully coding SEO friendly buttons. In my tutorial, I have tried to keep the coding as simple and lean as possible. I have also tested the CSS coding on all of the major browsers, including IE6, and I am pleased to report that the buttons display perfectly on them all (with the exception of IE not supporting Text Shadows).
The CSS code from the <head>
body { font-family:Arial, Helvetica, sans-serif; }
a.cta { background:url(sprite.png); width:120px; padding:0 0 0 10px; color:#FFF; height:30px; display:block; line-height:30px; text-decoration:none; font-size:11px; font-weight:bold; }
a.red { background-position:0 0; text-shadow:1px 1px 1px #741613; }
a:hover.red { background-position:0 30px; color:#b9211c; text-shadow:1px 1px 1px #fff; }
a.blue { background-position:-130px 0; text-shadow:1px 1px 1px #193152; }
a:hover.blue { background-position:-130px 30px; color:#2c5691; text-shadow:1px 1px 1px #fff; }
a.green { background-position:-260px 0; text-shadow:1px 1px 1px #326532; }
a:hover.green { background-position:-260px 30px; color:#658d26; text-shadow:1px 1px 1px #fff; }
The HTML code from the <body>
<p><a href="#" class="cta red">Red Button</a></p> <p><a href="#" class="cta blue">Blue Button</a></p> <p><a href="#" class="cta green">Green Button</a></p>
Hi what a great tutorial i have one question from your coding say i wonted to put the sprite.png in a image folder what bit of the code would i change???
Thanks