What is up with you....

How To Create A Button Code

by Jo-Lynne on May 28, 2009

in Bloggity Bizness,How To

UPDATED: 2/6/11

I explain to my design clients over and over how to create a button code, so I thought I would write a post about it.

So you just got a blog makeover and with it came this nifty little button. (Or you got industrious and made your own using my tutorial.) But you aren’t entirely sure what to do with it.
The Code

First, let me explain the basic button code. Here is the code to my Musings of a Housewife button.



Now let’s break it down. There are basically two parts:

Hyperlink Reference:



The hyperlink reference is defined by href. This determines the web page that the button will link to — in this case, Musings of a Housewife.

Image Source:



The image source is defined by img src. This calls up the image from where it is hosted online.

So, let’s use this generic example, and I’ll show you how to create your own working button code. You will replace the parts in bold. Make sure you end the code with because that is how you close the code so that nothing else picks up the hyperlink reference.


1) Create the Hyperlink Reference

Replace “Web Page URL” in the hyperlink reference above with the URL of the web page you want your button to link to. Make sure to enclose it in quotes.
2) Create the Image Source Code

Host your image somewhere online. I use Photobucket. Once you’ve uploaded your image, replace “Image URL” in the sample code above with the URL to your image.