Tag Archives: buttons

Earlier this week, Gmail rolled out new buttons to the site. As I understand it, these buttons are meant to make the UI more consistent across browsers, and make the experience more streamlined.

These buttons have a gradient background, making them appear rounded, and they are grouped together in "pills", to keep related actions together. The buttons on the ends of the pills have slightly rounded corners. The cool thing about these rounded corners is that they are pure HTML/CSS (they don't use any images) and they work in all browsers (unlike the firefox-specific -mox-border-radius directive). The drawback is that you can only get slight rounding; no a gradual curve. Also, the markup is far from simple.

I thought they looked pretty sweet, so I got to wondering how difficult it would be to try them myself. Douglas Bowman, from Google, wrote a post about how these new buttons evolved. He didn't come out and say how they were done int he final result, but he did invite people to reverse-engineer the new buttons. I decided to take him up on that invitation.