Let’s start off with a screenshot of what the buttons look like on modern browsers

I spent a good deal of last night making sure they also look like this on many older browsers, in fact these are now officially supported:
Opera 9.6x
Firefox 3
Firefox 2
Safari 3
Safari 2
Internet Explorer 8 beta
Internet Explorer 7
Internet Explorer 6
Chrome

And I seriously hope that’s enough for your needs, if supporting all of those isn’t enough for you then I’m not certainit’s even possible to satisfy your needs. Personally I must admit I’ve learned a lot in getting all of these browsers to work. Most of all that Firefox 2 doesn’t have an inline-block, but rather a -moz-inline-block for some strange reason. It’s also interesting to not that Safari 2 and IE break when you have trailing commas in your lists of properties, which I’m used to so it’s easier to add stuff.

Anyhow, here’s what the buttons look like in Firefox 2

And what they’re like Internet Explorer 6

I should probably also note that there are two known issues with the buttons. Namely that in Internet Explorer onchange events don’t work since it doesn’t allow firing them on noninput elements and that in IE the darker border on the right vanishes on activated buttons for some reason, I was simply too tired to hunt this one down and you know what, I can live with a minor glitch such as that.

Since you’re still reading, please head over to the jQuery imageless buttons a la Google examples now.

NEXT DAY EDIT: I have been shown the error of my ways and in just how many browsers I never considered the buttons don’t work. I will fix this and do another announcement. Until then please move along, there is nothing to see here, but I’m leaving the whole shebang up for the world to see to remind me never again to be as cocky without making sure. Thanks guys, you’ve been a wonderful crowd.

For the record, the buttons used to work in firefox 3, but then it updated to 3.0.6 and they stopped working for some reason.

Last week the whole internet was abuzz with Google’s reinvention of the button. They’ve issued numerous press releases about it, or at least it was people who have worked on the project and talked about it on their blogs, whatever really. The buttons we see today on gmail and other google services are, from what I can tell, version 3.1 and are the result of “endless cycles of code revision and quality control” by a whole team of very talented engineers.

Well, dear Google engineers, I’ve got you beat. I’ve managed to recreate their results in roughly six hours over two days and although I haven’t tested all of this in Internet Explorer yet I have good faith that it works there as well as everywhere else (I’m basing this on the fact that lately my stuff works 95% on IE out of the box, practice I say).

Over these few hours I’ve created a simple to use jQuery plugin and am releasing it under GPL and MIT license so anyone can benefit from what I’ve come up with in a very simple way. In fact, all it takes is calling a function on an element, any element, and it the plugin injects a bunch of html and css into said element to turn it into a button. Furthermore, I’ve made it so that buttons can behave as dropdown menus of sorts, select elements or checkbox elements. They mimic these elements to such an extent their values submit together with forms and even an onchange event is fired when the value changes.

I’m afraid my blog won’t let me inject css styling and such so here’s a screenshot of what it looks like:

To see a live demo and download the code go to thejQuery imageless buttons page.

The hubris

I have been informed by many people that I am an idiot. And they’re right! What was I thinking putting trust in IE7 and not testing it there even once? My excuse is that I was far too excited about the whole thing, seriously, I’ve been walking on air all afternoon, and I don’t really have access to IE at home. So, Google guys, you’re still much awesomer than me! But I will prove that I can get this working on stupid browsers and still spend much less time on the whole thing.

While you’re all still happily commenting, if I get it working on FF2 and IE7 will that be alright? Or should I go as ancient as IE6 and FF1.5?

EDIT an hour or so later: Alright guys, it’s now PERFECT, absolutely perfect in Safari and even FF2 (at least on mac). Tomorrow I’ll tackle IE and once I surmount that insourmountable obstacle I shall spam dzone and such yet again in hopes of a more positive response. Hey, you did all say you loved the thing save for the whole browser issues. My role is to serve the users.

Beautiful design, however, often goes unnoticed. People don’t see the code, managers don’t care for beauty and sexy, all they care about is productivity. This is why, with this piece of art, I sought to point out the clash between what a programmer wants and what they are forced into doing by circumstance. The roses depict seeking ultimate beauty while the small and scattered chrisantemes try to show how much random nuissance comes into play with development.

Scattering the pieces of paper with code amongst the beauty I tried to show the way a true programmer thinks – constantly scraping code that is less than perfect, constantly thinking in several threads, keeping wildly different parts of the project in their mind at all times. These papers then try to live amongst the petals in hopes of learning from them, in hopes of improving, of becoming as beautiful and perfect as The Rose.

The background is transparency, the foreground a computer GUI, these depict clairvoyance to see far ahead – predicting problems before they arise, and the basic tool of every programmer.

Good code is poetry.