So, You Want A Link Button, Huh?

By Joe Burns

(and updates by editorial staff)

You know that the web is held together through a series of hypertext links. Or, as a student of mine called it "A web of blue words." That's not a bad way of putting it actually.

Now, it's possible for you to use hex codes to change the color of the links and visited links. See my tutorial on background colorssee here) or by making it an image map.

In this tutorial I'll show you an easy way to make your own link button--with your own wording--in order to brighten up your page and make a nice classy departure from all the blue words.

What I'm Talking About

Below is a link button:

Go ahead -- click on it. It'll jump you to a new page and you can jump back from that page.

Welcome back. Pretty neat, huh? I think those buttons really look professional. And they're not all that tough to make. Now, contrary to what some of you new to HTML might think, the thing above is not an image like a .gif or a .jpeg. It is made through form commands. (For a whole lot more on forms, see my tutorial.)

How To Make the Button

Here are the commands I used to place the button above:

<FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Clickable Button">
</FORM>

If you've already read the tutorial on forms you already know most of this. For those of you who don't, note this: The first command (the FORM command) has three parts. Here's what each part means:

  • FORM tells the computer a form item is going here.
  • METHOD tells the computer how to handle the form command. In this case, you are making a link.
  • ACTION denotes what connection you want to make. Here we made a connection to something called "page1.htm."
    Note: When using these buttons, make links using the entire URL: http://www.etc.etc.etc.

The second command (the input command) places the button. It has two parts, and here's what they mean:

  • INPUT TYPE tells what type of input will occur (duh!). In this case you want to "submit" something. You see, the FORM command above is looking for a link. Here you are "submitting" a link. Get it?
  • VALUE is the wording that appears on the button.

Finally, end the whole thing with this:

</FORM>

It's simple and it looks nice.

What About that "?" Mark?

You're going to get one. It's one of the downfalls of the link button. Just make sure you place a slash after the end of the URL you are jumping to, that eliminates the problem of a link being bad because the computer added a ? mark.

Can't I Get Rid Of It?!

     Yes, but it involves JavaScript, which sometimes scares people. But if you are one of the bold, here's the format:

<FORM>
<INPUT TYPE="button" onClick="parent.location='page.html'">
</FORM>

Just change out the "page.html" with the URL of the page you want to click and go to. I won't get into the concept of JavaScript here, but if you're willing to learn more, see my JavaScript primers.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •