Textured CSS3 Buttons

CSS3 Textured ButtonsI don't remember how I came across the website, but I read the article, Noise and Textures, on the Bjango blog. It's about designing textured buttons in Photoshop that scale and continue to be textured regardless of the size of the button.

It was cool, but then I started thinking of how to do the same basic thing with buttons using HTML and CSS3 and minimal images. I found a few sites online that use gradients, or have buttons that are transparent on a textured background, but I didn't see any where the buttons were, themselves, textured.

View the Textured CSS3 buttons demo

The textures

The first thing I needed to do was make some textures for the three buttons I planned to build: grain/noise, cloth, and diamond plating. I decided immediately to try building the textures from scratch, so I dropped into Photoshop and got to work. You can see that process below.

Some minor details of note: I saved the textures as PNG8 files, so that even IE6 won't choke on them, but I had to do the final file saving in Fireworks instead of Photoshop, otherwise the more delicate transparencies would have been destroyed. Photoshop's "Save for Web" is not very good at all. Skip it and use Fireworks; it's far better at producing comparable image quality with a smaller file size. To eek out even smaller file sizes, try using ImageOptim (Mac only) on the images exported from Fireworks.

HTML

I wanted to keep the markup for the buttons as simple as I could, so I ended up with a span nested inside a link with a class to decide the styling.

<a href="link" class="bluegrain"><span>Link text</span></a>

CSS3

For the CSS, I used LESS CSS, though you could just as easily use SASS or go all-out on your own.

As with the Photoshop step-by-step, I'll save the uber-detailed descriptions for another time. Check out the demo's source code for the CSS that makes it all happen. If you have any questions, just leave a comment below and I'll see what I can do to help.

CSS3 Textured Buttons in the wild

The CSS and textures I made  totally free to use. No restrictions, obligations, donations, or any other "tion"-ending words required. If you do decide to do something with these buttons, or it inspires you to go off on a tangent of your own, I'm interested in seeing it. Drop me a line on Twitter.


Updated March 24, 2013: 
Updated the recommendations on image compression and software.

Updated Oct 9, 2011:
Added video tutorial obout how to make the tiled grain textures.