The btt class used here is based on the well-known method of grouping images together in one file, CSS Sprites(1), in an effor to reduce HTTP requests and not only that it does, but it also displays a clean mark-up. With a few optimization applications you can reduce the total file size afterwards(2).
The four states of an anchor are: default, hover, active and visited – I will probably use the first three states in this example. Using the btt class I am bringing all the images required in one single file, called btt.png from which I will build various buttons using that single file.
All a with the btt will be automatically rendered as block elements, with a background image already set. The text-indent:-9999px; is added to remove the text within the anchor element, thus leaving visible only the button for the user and the text for search engines robots, etcetera.
The other two properties line-height:0; and font-size:0; have the same effect as the text-indent:-9999px; and was added to ensure a maximum compatibility with other browsers – it also removes the text if you apply the class to an input element.
You can use GIF or JPG, if you wish, but PNG provides better transparency and colors than GIF and I am able to edit, move or delete layers quickly when I am needed with Adobe Fireworks, for example, and I can find the position of each layer more faster.
Before this method, you could have rendered a default state of a button and a :hover state by using two images, but when trying to click on an anchor, activating the :hover state, the web document would had to load the second image then, thus resulting in a approximately one second, more or less, of blank area until loading the respective image.
Now, by loading only once the btt.png file, you are also loading the hover state along with the default which results in not having an one second blank area when activating the hover state of an anchor.
a.btt-login:hover { background-position:-7px -34px; }
The “login” button has a width of 79 pixels with a 22 pixels height – we have also specified its background position. We are now simply writing an a tag with two classes: btt and btt-login.. The first class will render the anchor as a block element, load the btt.png file and apply the properties to remove the visible text and the second class will add its dimensions and its background position.
Peace of cake!
