So to sum up, thoughtbot’s best practice is to implement buttons solely with CSS rather than with images, correct?. I’m totally cool with doing it that way (I’m used to it in projects where I’ve used Bootstrap).
One concern in Genlighten’s case would be that a large percentage of our userbase comes to us via older browsers (<= IE8) and so I’m guessing I’d potentially be showing them rectangular buttons instead of rounded ones. But that’s probably not a big deal at this point.
I don’t seem to be able to upload my button normal/hover state images to this post using your image upload tool (perhaps because they are gifs?) but I’ll send a separate e-mail to you including them. Basically, from the original site design and a subsequent update we have custom rounded buttons with drop shadows and other “Web 2.0” effects that are probably looking kind of dated in the current iOS7 era. Some are just blue with white Helvetica Neue text and could easily be replaced with Bootstrap-like CSS-generated ones. Others are more brown-gold and have color icons on them in addition to text. Those I’m guessing would be tougher to implement in CSS, but still probably doable.
I’m perfectly content using an online tool or a manual approach to making an image sprite file that aggregates all our various buttons/states and then adjusting our CSS to handle the background-x-y shifts (a few of our specialized buttons use that technique already.) But it would probably be a lot easier for maintenance and updating purposes to ditch that approach in favor of the pure CSS one you’re advocating.