Creating Buttons in HTML

There are several ways of creating buttons in HTML:

In theory, Javascript is the most flexible way of creating buttons. However, it's been badly abused. Many websites are crawling with annoying, animated Javascript images. Many people, including yours truly, keep Javascript turned off. If I visit a site that has animated Javascript, I will either turn off Javascript on my browser or simply go somewhere else. If you can't afford to blow off some of your customers, avoid using Javascript.

And don't even get me started about Flash. At one time I was a consultant for some company that asked me to test their website. I clicked on their URL, only to find a completely blank page. The entire website was nothing but Flash. If I had been a customer, I would have thought these guys were idiots.

Enough ranting. Here is some simple ways to create link buttons with and without Javascript.

Creating Buttons using HTML forms

This is the traditional way. You use 

  <form method="post" action="http://randombio.com/imal.html">
  <input name="url" type="hidden" value="http://randombio.com/">
  <input type="submit" value="Finished Shopping">
  </form>

This creates a button like this:


You can put an ordinary URL in a form, or you can point it to a CGI script or program that carries out some action when the user clicks the button. If you create a CGI script, put it in the cgi-bin directory as described here. The only disadvantage of input forms is that they take a little extra typing.

The properties of a form can be changed by assigning values to "input" in your CSS file. 

  input{  text-decoration:none;
          color: red;
          background-color: #449900;
       }

This makes the button green with a red background.

Creating Buttons in Plain HTML

These buttons are useful if all you need is to create a link. Put this in your HTML header: 

  <LINK REL="stylesheet" HREF="mystylesheet.css" TITLE="mystylesheet">

Put this in the body: 

  <div class="mybutton">
  <a href="imal.html">
  <button style="width:160;height:24; background-color:#97cfc3">Image analysis
  </button></a><br>
  </div>

* See below if you are viewing this in Internet Explorer.

This is nothing more than an HTML button enclosed in an "A" tag. These buttons became part of HTML in version 4, and might not work in very old browsers. To get rid of the underline, and change some of the default properties, put this in your .css file: 

  div.mybutton{
        position: relative;
        margin: 0em 0;
        font-family: helvetica,arial,sans-serif;
        font-size: 100%;
        font-weight: bold;
       }
  div.mybutton a{
     text-decoration:none;
  }

Or, if you want all your buttons to be the same color, leave off the DIV CLASS stuff and just use 

  <a href="imal.html">
  <button style="width:160;height:24;">Image analysis
  </button></a>
  ...
   button
      {  color: #113344;
         background-color: #77bbaa;
      }

If you omit the div class stuff, you need to put the following in your CSS file, to get rid of the underline: 

  a:link{  text-decoration:none;
        }
  a:visited
        { text-decoration:none;
        }

However, this would eliminate the underline for all links, not just the buttons. Here's what the button looks like with the default text decoration:

Technically, you're supposed to put all the width and color information in the CSS file. If so, you can change the color of all your buttons at once. If your buttons are all different sizes, it becomes cumbersome, because there is no way to pass information to the .css file; you have to add a "style" tag to your html (which violates the principle of separating style from content) or define a different class for each size.

Dealing with Internet Explorer 6

Unfortunately, there's a problem: the plain text HTML buttons don't work in Internet Explorer. The link is shown, the button gets depressed, but nothing happens. IE is incorrectly assuming that these buttons are Javascript. So, you have to add a Javascript tag: 

  <div class="mybutton">
  <a href="imal.html">
  <button onclick="window.location='imal.html'" 
  style="width:160;height:24">Image analysis</button><br>
  </a>
  </div>


The button above will work in Explorer as well as Firefox, and will function regardless of whether Javascript is turned on, except in IE, for which Javascript is needed (Javascript is called "Active Scripting" in Explorer, and can be enabled or disabled from the Security Tab in Internet Options).

Always use "position: relative;" in your css sheet for images and tables when using wrapped text, otherwise the images will disappear in IE 6.0.

Variations

The button can be made transparent (which should make it white in this example): 

 <button style="background-color:transparent">Transparent background</button>


or you can have an image instead of text: 

  < button style="width:220; height:24; background-image:url(mybackground.png)">
  </button>

Use one of the other techniques on this page to make the button do something. However, if you put text inside the image instead of in the HTML, you must also set the "width" and height attributes, or use some other technique to get the button to the correct size.

Of course, if you're going to all the trouble of using an image, you may as well just put an 'A' tag around the image and dispense with the button.

Creating Buttons using Javascript

Okay, so maybe I'm a crank for hating Javascript. Here's how to add a button with Javascript: 

  <button onClick="window.location='http://randombio.com/imal.html'" 
  style="width:160; height:24">Image analysis </button>


This button will only work if the reader has Javascript turned on in their browser. If so, you can go crazy with animated ads! (Just don't expect me to visit your website.) More examples at http://www.javascriptkit.com/.

Creating CSS Buttons

Cascading Style Sheets are the recommended way to change the defaults in your HTML file. CSS cuts down on the amount of stuff in the HTML file, making it much easier to read. You can also use style sheets to create what are called "CSS buttons". 

  <div class="cssnav">
  <a href="http://randombio.com"><img src="downbtn.png" alt="Alternative text" /></A>
  </div>
Alternative text

An advantage to CSS buttons is that you can have a separate image for when the user mouses over your button. In this example, the image says "Click here to purchase!". In the real world, the alternative text should also say the same thing. A tutorial with some good examples can be found at http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml.

Back