Of links and buttons

I could talk for a while about usability on the web and what are some good ideas and what are some bad ones. More specifically I know a lot about what makes for good interfaces for web applications. Generally speaking, people have some expectations about the way things work on the ‘Net. The days of breaking conventions in order to get some cosmetic appeal are slowly disappearing. All ranting aside, one of the things that I have long pondered is the use of buttons vs. links in my applications.

Buttons are form elements, people expect to see them after filling out a form, and I would be foolish to deny them that. I know of a few people who are a fan of using images and rollover effects, but in the days of CSS and graceful degradation, I would like to think that people would be moving away from that. However, when people see that sexy blue link with the underline, they half expect it to bring them to another page. Some page that is not the current page or at least somewhere different on the current page. However, as is popular with web applications, links sometimes link back to the same page as they originate - often with different parameters passed - perhaps for sorting or other display related purpose. The browser actually loads something new, but things haven’t changed - much anyway. In cases like these it is often better to use buttons. Buttons… forms… clunky… the issues pile up.

All of this lead up to tell you there is a different way to make buttons - using CSS. Take the following button for example: (taken from a site I am working on now - colours were chosen by the designers, not me - I’m not so sure I’d put pink and orange together.)

I’m really a link! Try it, it even clicks - although if you release the mouse on it you will reload the page. Some browsers (IE/Firefox) maintain the active (clicked) state if you click and drag the mouse off the button. Others (Opera/Safari) release the active state when you release the mouse button off the button.

That said, it is easier than forms and buttons, more flexible than static images and I don’t have to mess around with the GD library if I was so determined to use dynamic images. Simple, very hand code-able, all-in-all a pretty handy technique.