Image of a button for pros, technicians and tools

To create a professional application, you need to replace the HTML buttons with something more attractive. What resources does the HTML standard offer?
Here are three simple methods that can be implemented using images that can be uploaded or implemented using editing software (several links are given in the appendix).
They are suitable for performing three functions, respectively:

  1. Button to submit the form.
  2. To execute the script.
  3. To load another page.

Use input type = 'button'

An HTML image button is a submit form button, it sends data, but you can use various methods to create unlimited image buttons.

If you do not want to use this item to submit a form, you place it 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 to demonstrate:

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

No CSS code is required .

Use button element

Using the <button> element is more standard, but without the src attribute, you will need to add CSS to display the image that will be placed as a background image.

This element has the advantage of being able to display text over an image, which allows you to use the same image for different buttons, each showing its own label.

Demonstration:

These buttons are from the Free Button gallery, see the link in the appendix .

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 ID:

.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;
}

Use tags <a>

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

The technique implemented by the Free Web Button is used, the site of which is linked in the application: one image contains both versions of the button, a normal image and a darker image that will be displayed when the mouse goes to the button. The style property offsets the image based on the state of the button, that is, based on mouse movement.

Demonstration:

Source code:

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

CSS ID:

#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 background alignment with the background-position property, the visible image changes. The value left is the default and does not change, only when the mouse hovers over the value bottom replaces the default value top.

Reference: Image Button Element Properties

Property Function
name Name used to transfer form data
src Image URL
height Image height
width Image width
style Personal style. The stylesheet applies to all buttons in the image.
alt Text corresponding to the feature to facilitate access.

Obsolete attributes:

Tools and images

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