Community Documentation

Styling more usable form buttons

Last updated August 23, 2009. Created by jibbajabba on March 14, 2007.
Edited by SLIU, bekasu. Log in to edit this page.

To try and prevent clicking on destructive buttons, it might be a good practice to make the Delete button less important, yet still available. To do that, you can simply style each of the button types Drupal puts out—edit, submit and delete. Here's an example making the submit button boldest, and removing the button style of delete.

Only local images are allowed.

#edit-preview {
  border: 2px solid #CACC00;
  color: #A6A800;
}
#edit-submit {
  border: 2px solid #769405;
  color: #668004;
}
#edit-delete {
  background: none;
  border: none;
  color: #999;
}

Notes

If you add a margin-left of 2 or 3 em's, the delete is harder to click by accident. Also increase the font size on the submit button so the whole button is larger.

About this page

Drupal version
Drupal 5.x

Theming Guide

Drupal’s online documentation is © 2000-2012 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.
nobody click here