Image buttons for professional apps: techniques and tools

To create a business application, HTML buttons must be replaced with something more attractive. What resources the HTML standard has it?
Here are three simple techniques to implement, using images that you can download or make with editing software (several links are provided in the appendix).
They are suitable to three functions in order:

  1. Button to send a form.
  2. To run a script.
  3. To load another page.

Using the input type='button' element

The image button is an HTML form submit button, it sends data of the form but you can use different techniques to make image buttons without constraints.

If you want to use this element but not send a form, it is just placed outside the <form> </ form> tags.

Example:


Source code:

<input type="image" src="image/scriptol-light.png" name="Submit" value="Envoyer" 
    onMouseOver="this.src='image/scriptol-dark.png'" 
    onMouseOut="this.src='image/scriptol-light.png'" 
    onMouseDown="this.src='image/scriptol-down.png'" 
    onClick="clickit(this);"
>

JavaScript code of the demo:

function clickit(element)
{
  var x = document.getElementById("storage");
  x.innerHTML="<b>Clicked!</b>";
  setTimeout(function() { x.innerHTML="";}, 2000);
}

No CSS code is required.

Using a button element

It is more compliant to use a <button> element but without a src attribute, CSS code must be added to display an image, which will be placed as a background image.

This element has an advantage, the ability to display text above the image which allows to use the same image for different buttons each displaying a specific label.

Demonstration:

These buttons come from the Free Button gallery, see link below.

Source code:

  <div class="buttonbar">
  <button type="image" class="button" onClick="clickhome(this)">Home</button>
  <button type="image" class="button" onClick="clickexit(this)">Exit</button>  
  </div>

CSS code:

.button
{
  position:relative;
  background-image:url(image/cosmic-gel-light.gif);
  border:none;
  width:111px;
  height:32px;
  color:white;
}
.button:hover
{
  background-image:url(image/cosmic-gel-dark.gif);
}
.button:active
{
  top: 1px;
  left:1px; 
}
.buttonbar
{
  padding:4px;
  margin:2px;
}

Using <a> tags

This has the same benefits as the button element, and is suitable when the button is designed to load another page.

The technique used is that Free Web Button implements, whose site is linked in the appendix: a single image contains both versions of the button, the normal image and the darker image that is displayed when the mouse passes over the button. A style property shifts the image on the button state, ie following the movement of the mouse.

Demonstration:

Source code:

<div id="button-bioloide"><a  href="#"></a></div>

CSS code:

#button-bioloide a
{
  display:block;
  width:116px;
  height:34px;
  background-image:url(image/button-bioloide.png);
} 
#button-bioloide a:hover
{
  background-position:left bottom;
}

By changing the alignment of the background with the background-position property, you change the image visible. The left value is the default value and is unchanged, only changes the bottom value that replaces the default top when the mouse is over the button.

Reference: Properties of the image button element

Property Function
name Name used to send form data.
src URL of the image
height Height of the image
width Weight of the image
style Style personal to the button. A style sheet applies to all image buttons.
alt Text giving the function to facilitate accessibility.

Deprecated attributes:

Tools and images

You can also create a button with the canvas tag or SVG. But if you prefer using predefined elements, several sources can provide them: