YUI and Gmail Buttons, Together
2009-03-27 07:50PM PDT/Home
I was reading Recreating the button, Douglas Bowman's post on creating imageless buttons for GMail. It got me thinking, how would I do that, you know, imageless buttons in YUI? Gmail & YUI, can I do that? It felt a bit like dogs and cats, living together!
I was hoping for easy, easy, but it turned out to be tougher than I thought. Unless I missed something big. Subclassing buttons in YUI isn't that easy, and YUI really wanted to be based on a button or input tag. To work around all that I hacked together a DivButton class, and then created a GmailButton subclass which sets up the imageless div's like what's on Gmail. For your enjoyment, I give you:
Gmail Style Imageless Push Button
View the source on that file to see what a travesty I created. Probably not the best way to do it, I admit it. But it mostly works. All disclaimers apply. Yes, I work for Yahoo! No, not in the YUI group. And Yahoo! had nothing to do with this, except the YUI part of course. I thought Google's imageless buttons were cool so I wanted to see how YUI would handle it. As it turned out, not so well. If you see a better way to do this, please let me know!
Update: I realized after making the image of the button states, I hadn't accurately reproduced the mouse-down state. I swapped the top and bottom colors, but it looks like both should go to the darker shade of gray with the border remaining the same.