Its a really simple trick actually.
You start by creating one instance of a button (the normal state) and save it as an image file. The format of the file can be anything (jpg, png, gif, etc). (Referring to the picture you posted, it would be the top button).
Then you create the second instance of the button (the over state) and save it that as well. (The bottom button in your image).
Once you have to seperate image files, now we join them together.
Create a new document, the width should be the same as of the other images but the height should be "double". For example, in your example image, each button is 25px high but the final image is 50px high. In Photoshop, you can simply open the previously created image buttons and Copy Paste them in the new document. Position them on top of one another and save them as one image.
I've written this quite quickly assuming you have a little know-how of Photoshop, let me know if you don't and I'll post a more explained version