On 3 Februari 2009 Google launched their new “custom buttons” in Gmail. The idea and creation process behind these buttons were described in the blog post Recreating the button at stopdesign.com, who were part of the process to develop these buttons. The buttons were designed for the following reason:
The Button widget has been designed to look as close as possible to the look and feel of the Google button (read: pixel perfect). To make the usage of button easy it has same class interface as the PushButton widget from the GWT library, this makes it easy to replace existing buttons with the new Button widget. Additional there are several methods to easily change the color, size or text/button ratio. For the color I added a method that based on a hue and saturation value calculates all colors needed. This makes it easy to change the color of the button.
The button is constructed with nested
<div> element’s. You can easily see this when you view the button with your favorite browser code inspector tool. Eventually I ended up with one
<div> element less than in the Google button, which didn’t effect the layout as far as I my tests concluded.
After the basic reverse engineering I fixed the specific browser support issues, mainly related to the
inline-block support. In the process the free browser testing service browsershots.org was of great help. But service only helps you with layout issues, not if the effects and actions work correctly. The Internet Explorer Application Compatibility VPC Image make it possible to test different versions of Internet Explorer. In the end I only didn’t fix IE 6 issues yet. Here are some details regarding the major issues:
It turned out that to display the button correctly in Internet Explorer 7 you need to set a DOCTYPE. It doesn’t matter which one, you just need one. So don’t forget to set one!
What is interesting about the google button, is the use of the
display property value
inline-block. This property can be used to position block elements horizontally without having to
float them. Because browser support has been very poor and using it is was not recommended. But newer browsers do support it and it won’t be long before you can safely use this property value.
Of the major browsers, support in Internet Explorer 7 can be achieved via the hasLayout trick, used in the button widget by setting
zoom:1 instead of
display:inline-block. In the cobogw library there is a method CSS#setInlineBlock that will take care of different browser implementations.
Unselectable button text
If you check the Google button you will see that’s it’s not possible to select the text. Making text unselectable is normally not considered good practice, but in this case a normal button is also not selectable. But making something unselectable differs almost is all browsers. In the cobogw library there is a method CSS#setSelectable to take care of different browsers.
Fire click event
<button> element triggers a click event in case the user hits the space bar or the return key. However, a
click() on the
<div>. In the other browsers you need to do somewhat more. In short, you need to create a MouseEvents and call the
dispatchEvent method on the
<div> element with the a click event object.
For most other use cases it should not be needed to fire events that are normally only triggered by user interaction. If you find yourself doing such and are not creating ‘low’ level widgets like buttons you probably should reconsider your code. A method fireClickEvent that takes care of different browser implementations is available in the cobowg library to fire a mouse click event.