In my earlier post, I included a timeline illustrating the evolution of user interface components using buttons from various representative, “popular” systems from each year since 2005. The 2009 button example featured a button that I used for one of my most successful websites. I feel awkward saying this, but it is the truth: the button design was inspired by this GIMP tutorial, which in turn was inspired by Windows Vista’s user interface 1, and it is the best-looking button style I have used in any of my websites.
Writing that last post instilled a feeling of nostalgia for quality interface components. When I had originally incorporated this candy-button 2 style into that website, I had to use static-width images. But today we have CSS3, and armed with this extremely powerful styling knowledge, I set out to reincorporate candy buttons into the latest release of my website using only CSS3, and the results are delicious.
What’s nice about the button styles is that they are just transparent overlays: they add several layered transparent gradients to the existing flat buttons provided by Bootstrap, so the color of the entire button can be changed by simply modifying the background-color property.
I hereby release the candy button styling code to the public domain. You are free to use it however you like. It would be nice if you could mention me somewhere—maybe even put a link to my site—but it is not necessary. This is my attempt at bringing the vibrance back into user interfaces.