Three images, actually (normal, hover and active). Six if you have buttons in two different colors. Twelve if you need the buttons in two different sizes.
You need a truckload of CSS to define how a button looks but you only need to do it once. Creating arbitrarily colored and sized buttons is as easy as adding one or two lines of CSS. And at some point in the future we will actually be able to drop the prefixes and the CSS will become quite elegant and compact.
Well, you can still do it with one image (CSS sprites and kind of "sliding doors" technique), however an image is one more resource to maintain, and that "truckload" of CSS in reality is smaller than HTTP request headers of an addtional request for said image (even if responese is 304 Not Modified). Sure, you can properly set Expires into far future and save request for repeated visitors, but then you will need to come with a versioning scheme.
All in all, CSS way is simpler and easier to maintain. Add some more bling with CSS transforms, e.g. some nifty color fade/shift on hover and it gets realy tough for an image based solution to stand a chance.
All valid points, I looked at it more from the maintainability point of view, not so much the speed angle. You will have to maintain a Photoshop file, have some mechanism in place to stitch together your sprites and export a truckload of different images. All that can be automated up to a point, but still. Seems like a lot of hassle.
That, and more and more browsing is done using easily zoomable browsers like Mobile Safari. It's becoming less likely that users will experience your site at its "native" resolution, so anything that moves away from poorly-scalable images is a good thing.
You need a truckload of CSS to define how a button looks but you only need to do it once. Creating arbitrarily colored and sized buttons is as easy as adding one or two lines of CSS. And at some point in the future we will actually be able to drop the prefixes and the CSS will become quite elegant and compact.