Satin

And this is the final rendering with a background image and sadly sacrificing the rounded reflections. I really wanted those rounded reflections to work. But even with flat reflections, these buttons still look smooth and touchable, if not quite as realistic. Well done, Paul.

I experimented with a background gradient instead of an image, which worked nicely in browsers that support it. But since support for that was just added in Firefox 3.6, I figured it was important these buttons look good in slightly-older-but-still-viable versions. They even look good with square corners in browsers that don't handle border-radius.

And yet, there is a different downside to using images: Firefox 3.0 supports -moz-border-radius, but doesn't clip background images... so that version gets rounded buttons with oddly protruding corners. Luckily the overwhelming majority of visitors to AMO are on Firefox 3.5 or higher, so I think we can let it slide.

Rebound of
View all tags
Posted on Mar 1, 2010

More by Craig Cook

View profile