How Do I Turn a Link Code Into a Button?

By Kathy Burns-Millyard

Image based web buttons
i web buttons image by kruszek from Fotolia.com

One of the most basic features of Internet websites is hyperlinks--the blue underlined words or phrases that can be clicked on to take you to another website or web page. Once you've gotten the hang of creating hyperlinks on your own website, you'll soon decide you want to spice things up a little in the design. One easy way to make your web pages more appealing is by creating button hyperlinks instead of word hyperlinks. There are two basic ways to accomplish turning links into buttons on your website: Images and Forms.

Image

Turning a basic hyperlink into a button with images is a simple matter of choosing or creating your button image in JPG or GIF image format. Once you have the button image you'd like to use, upload that to your website server. At that point all you need to do is create the actual link on your page, and this is accomplished in a very similar way standard text hyperlinks are. The primary difference is that you will insert your button image in place of the text that would normally be hyperlinked, like so:

The of that code causes your button image to show instead of plain text words to show, and when someone clicks on that button it will respond as a hyperlink and take them to the page you have linked the button to.

Form

An alternative method of turning a web page link into a button is to create a simple form. This method of button making is popular because you can cause the clickable button to have any words on it you'd like, and you don't have to use complicated image editing software to accomplish that.

Here is the basic form code to create a clickable button:

In the first line, you're telling the web browser that this button is a link to another page on your site named "link-to-page.html"

The second line provides an input type of "submit"--which is what creates the button itself--and the words to put on that button are contained in the "value" section. Finally you end the form with a closing tag.

×