HTML and CSS Reference
Adding them in the same btn.png file proves to be the
most effective solution considering that the amount
of text won't change in height, but in width.
It also improves the size of the website by reducing
the images to the minimum size needed ( remember
that we've trimmed at a max width of 2px ) and grouped
into one image, btn.png .
After displaying the button, just add the :hover state
in the style.css by changing the position of btn.png
background: from top left to bottom left .
This is going to swap the btn.png background and
display the last part of background when the :hover
state is active.