For most web apps, gray buttons with black text is fine. But if you take some time to jazz up your buttons a little, you are making your app a little nicer to use and giving your users small visual cues to let them know their options.

Going from this:

to this:

with hover colors of green and red, which, in the U.S. at least, usually mean “go” and “stop”, can be just enough of a nudge to help your users and make them just a little happier. Here’s how I built these.

Credit

The bulk of the concept and CSS work for this came from someone else, but I can’t remember who anymore. It’s been over a year since I started using this technique. It might be from an old version of HTML5 Boilerplate, Blueprint CSS, 960 Grid System, or something Rob Conery did on TekPub. I wish I could give more specific attribution, but it was probably one of these. My main contributions have been some CSS tweaks, the JavaScript, and the MVC Razor helpers.

HTML and images

This is what we’re going for as the emitted HTML. We want these “buttons” to really be hyperlinks, not HTML buttons, so we don’t have as much browser style sheet nonsense getting in the way.

This does add some complexity for submitting, which has to be done with JavaScript now, but the same script (see below) can be used throughout the app.

The positive CSS class gives the green hover effect, and the negative one gives the red effect.

The icons I used are from the Silk Icons collection. There are lots of great icon libraries out there, so use your favorite. Anything 16x16 should work, but you can go bigger or smaller and adjust the CSS and HtmlHelper tags.

JavaScript/jQuery

An anchor tag with a href to “#” won’t get your values submitted back to the server, so we’ll use some JavaScript and a touch of jQuery for that. You’ll want to include this script on every page where you’re using these buttons.

CSS

The CSS for this is pretty simple. The div.buttons puts the buttons on one line and give a little vertical space around them. The .button and .button img styles do most of the work, with block styling, light and medium gray borders, a light gray background, some padding around the text and icon to fatten the button up a little, margins so there is space before the next adjacent button on the right, and a small shadow effect.

The :hover effects are where the color is flipped to darker gray, green, or red, with corresponding border colors.

The helpers here have two public entry points, LinkButtonForSave and LinkButtonForCancel. The rest of the code is refactoring out some of the route parsing and tag building work. It’s probably overkill for just these two methods, but it makes sense when you keep adding helpers for other buttons, like add, edit, delete, confirm, print, etc.