Friday, February 6th, 2009p>So, you want to create a button that you have full control over, and you want it to work well cross browser. Shouldn’t be hard right? Wrong.
Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and recently Gmail:
Doug does a really nice job at explaining the history of this work, and then detailing the issues at hand and various iterations of the work where he had some a-ha moments such as:
My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.
And how he got rid of the gradient image and instead uses CSS:
A really nice read. It works pretty well for me. The only real issue that I saw was that the drop down in Gmail for “More Actions” can be greyed out when you don’t have something selected. The type is subtle so at first I wondered why hover/click weren’t doing anything.
Oh, hey, would be nice to open source this kind of stuff good Google UX guys ;)