designbump

There has been a lot of talk about CSS buttons lately. Very understandable, since there are a lot of web applications being developed today that could benefit from slick looking buttons without loss in accessibility. Before jumping on the train myself, I just want to emphasize that you should not use this technique to replace real form buttons unless you know what you are doing. That said, the script I am providing to this article can create the same stylish buttons out of boring input buttons as well as plain anchors.

Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. Here is a simple tutorial to help out.

Used by many news portals, the technique above is a great example of how to optimize layout of breaking news. We have gone the simple way with the image above, using a combination of Photoshop layers over a background image. The way it is implemented for Wordpress platform by Derek Punsalan illustrates the power of wordpress custom fields, and also the limits of this input system.

I’ve worked on many projects where in I had to style the form/input buttons using custom background images. That is, I had to hide the default text of the button. It’s not a big deal, I know. But it is, when it comes to IE. Let’s review this in detail.

The following image(button background) has been used for this tutorial. You may right click and save it.