Home

I was browsing the LESS.js website a last week, marvelling at the ideas behind it. I scrolled back up to the top of the page to find the download button. I spotted it and instantly assumed it was a purely HTML and CSS3 creation due to it’s simplicity, but it turned out it was an image:

I was struck by an idea: recreate this button using only markup and CSS3, no images allowed! I knew from spending basically my entirely adult life studying web development a button of this design was perfectly possible: multiple CSS3 gradients for background, use of outline and border for the, well, borders, CSS triangles for the arrow, and box-shadows for the flourishes.

The result of a few hours well spent can be seen in the result tab of the iFrame below. Whilst not a perfect match due to typefaces, the image version and the markup version are pretty much identical. This shows just how powerful CSS3 can be (it even degrades nicely in IE).

One downside is the button is a little markup heavy due to the arrow section. This could easily be remedied if you included this as a background image if you ignored the ‘no images’ rule, but otherwise the markup isn’t that obtrusive.