By default Drupal 6 submit button is plain html input submit form, while you can add border, outline and background color to it without worrying about the different submit button width that Drupal produces, the result will never be as beautiful as if you skin the button with image.

Drupal 6 has a module that can do the image skinning for you : button_style module. The caveats of the module is as of this writing, the module will not display the ahah round throbber properly without a hack to ahah.js.

Now let us begin to theme the submit button by not using the button_style module and do it purely using CSS without the need of jQuery scripting.

First of all we need to create a new html marking that wrap the input element, by editing your theme template file and adding this lines of code :

 
// you will need to change the function name accordingly to your theme name
// this is an overriding function for theme_button($element) function
function myThemeName_button($element) {
  // Make sure not to overwrite classes.
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-' . $element['#button_type'] . ' ' . $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-' . $element['#button_type'];
  }

  return '';
}

Now you should have a div wrapper for the input element and span wrapper for right and left image

Next let us create an image that has 800 px width and 33 px height. Note : you can download the sample image to see what the image should look like.

Next we arrange the image and using css:

 
span.button-left {
  float: left;
  padding-left: 7px;
  height: 33px;
}
span.button-left a,
span.button-left a:visited,
span.button-left a:link {
  text-decoration: none;
  color: #fff;
  line-height: 33px;
  font-weight: bold;
}
span.button-right {
  display: inline-block;
  padding-right: 15px;
  height: 33px;
  margin-right: 10px;
}

/** GREEN BUTTON**/
span.left-green {
  background: transparent url('images/button.png') no-repeat left 0px;
}
span.right-green {
  background: transparent url('images/button.png') no-repeat right 0px;
}
div.button-wrapper:hover span.left-green {
  background: transparent url('images/button.png') no-repeat left -33px;
}
div.button-wrapper:hover span.right-green {
  background: transparent url('images/button.png') no-repeat right -33px;
}
div.button-wrapper:active span.left-green {
  background: transparent url('images/button.png') no-repeat left -66px;
}
div.button-wrapper:active span.right-green {
  background: transparent url('images/button.png') no-repeat right -66px;
}

input.form-submit:hover,
input.teaser-button:hover,
input.form-submit,
input.teaser-button {   
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 13px;
  margin: 0;
  outline: medium none;
  padding: 7px 0 13px;                              
}

And then.... nothing... just enjoy the button :)

AttachmentSize
Image icon button.png1.21 KB