It always bugged me that the a destructive button like Delete has the same weight in Drupal forms as Preview and Submit. To try and prevent clicking on destructive buttons, I find it a good practice to make those buttons 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.
#edit-preview {
border: 2px solid #CACC00;
color: #A6A800;
}
#edit-submit {
border: 2px solid #769405;
color: #668004;
}
#edit-delete {
background: none;
border: none;
color: #999;
}
Comments
02/19/07 @ 18:15
That's an excellent tip. One improvement you might also make is to give the delete button a larger left margin so that it appears further away from the other buttons. I do that religiously in my own web applications.
02/19/07 @ 19:02
Agreed. That would be a further improvement. I'll be using this in the new bike blog, which I'll announce soon.
03/13/07 @ 17:27
First of all, I love your blog. It's certainly one of the most interesting I have come across. Your designs always seems well-thought and just right. Your previous one (for this site) is a big inspiration in my hunt for the perfect blog theme.
This trick is very neat, perhaps should it be added here? http://drupal.org/node/124416
03/14/07 @ 07:40
Good idea, Johan, and done.
03/16/08 @ 09:09
Nice trick, thanks.
06/26/08 @ 03:54
Nice job! I like this too, however I would add cursor: pointer;
Since these don't look like system buttons, the user should know they are about to click something.
Submit and preview are obviously clickable, but if I were to guess by looking at it, I'd say that delete was disabled. Seeing a pointer over delete would re-assure the user it is definitely a hot spot.
Post new comment