Need an fast way to theme a submit button on your site? Using one hook_form_alter() function and some simple CSS, it's fairly easy to do.

The method below actually keeps the text of the button as text and not part of the image (this allows you to reuse the button image for multiple buttons), but you can just as easily set the #value attribute to '' to get rid of the text.

You'll use hook_form_alter() to simply add a CSS class to the button you want to theme and to modify the text of the button.

function mymodule_form_alter(&$form, $form_state, $form_id) {
if ($form_id == 'the_form_im_interested_in_form') {
$form['submit']['#value'] = 'Add Classes';
$form['submit']['#attributes'] = array('class' => 'make_me_an_image_button');
}
return;
}


Next up is some CSS that modifies the way the button looks. Be sure that your button's image is wide enough to handle the longest piece of text you might throw at it:


input.make_me_an_image_button {
background: transparent url(../images/super_button_image.png) no-repeat scroll left top;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
display: block;
padding: 0;
margin: 0;
text-align: center;
border: 0;
text-transform: capitalize;
width: 150px;
height: 30px;
}


If you really want to get fancy-schmancy, you can even add a "hover" state to your button as follows:


input.make_me_an_image_button:hover {
background: transparent url(../images/super_button_image_hover.png) no-repeat scroll left top;

}

More Quicktips

• ‹ Internet Explorer CSS File Lim…
• 44 of 100
• Keep Local Database and Filesy… ›