THE BUTTONS NOW WORK! Please go to jQuery imageless buttons a la Google take two.
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.
Continue reading about jQuery imageless buttons a la Google
Semantically similar articles hand-picked by GPT-4
- jQuery imageless buttons a la Google take two
- jQuery imageless buttons a la Google get an update
- Firefox's "funny" css3 image scaling quirk
- Django and IE9 don't play well together
- React components as jQuery plugins
Learned something new?
Read more Software Engineering Lessons from Production
I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.
Subscribe below 👇
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"
Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.
Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.
Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.
Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev
Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization
Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections
Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog
Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️