SVG Buttons

With SVG filters, it's easier than ever to create stylish graphical buttons for the web.

Using images for buttons is a much more pragmatic approach than attempting to style buttons with CSS, at least until widespread support for CSS3's draft-but-stable border-image property is available.

Up until a couple of years ago, I had generally created buttons using a PHP script that glued them together:

This was a useful when working with XSL, allowing me to simply call a template to include an arbitrary button text, rather than linking to a static button image.

Because I now use Django for most of my sites, this technique is no longer relevant. Because I'm not now producing templates to transform an arbitrary XML model, but producing templates to render specific models, I know when writing the template what buttons it will require. A typical button, designed for editing convenience, would look like this:

This button is a rounded rectangle with a gradient. The label is typed twice to give it a slightly inset look. Even though you have to retype the label twice to change a button, it takes only a few seconds to change the label and adjust the width of the rectangle to fit.

Inkscape 0.46 provided access to a wide range of SVG filters, making the process even simpler. Buttons are now never more complicated than a rectangle, a label, and the SVG filters to make them look pretty and three-dimensional:

Changing a button is as simple as it can be. Or is it?

I sometimes like to connect adjacent buttons into one strip, something which will be familiar to Mac OS X users:

SVG filters can make this a doddle too. By using SVG filters to create all of the graphical effects, including the rounded corners, these buttons can be dragged together and automatically connect with one another. The filter is applied to the layer, and the above buttons are editable simply as rectangles.

Try it: Download the SVG (Inkscape 0.46+ recommended).