Jak za pomocą CSS i xHTML utworzyć "zmieniający się" przycisk?

Utwórz nowy plik HTML posiadający wszystkie wymagane nagłówki (doctype, html, head, body...), oraz nowy styl css. Zapisz je np. na pulpicie. Plik HTML nazwij index.html, a CSS styl.css.

W programie graficznym przygotuj swój przycisk, czy też inną grafikę, która ma być odnośnikiem. Po utworzeniu przycisku przygotuj grafikę, o tych samych rozmiarach (najlepiej), która będzie się pokazywała po najechaniu myszką na ten przycisk.

Gdy już to zrobisz, przekopiuj jedną grafikę do drugiej i utwórz coś w stylu dwóch grafik pod sobą. Identycznie, jak na zrzucie obok. Przycisk na górze będzie widoczny, jako domyślny, a ten na dole, jako przycisk po najechaniu na niego myszką.

Przytnijmy teraz grafikę, usuwając przeźroczyste pole i zapiszmy go na pulpicie pod nazwą przycisk.png.

Powróćmy do naszego stylu CSS. Dodajemy tam identyfikator a#przycisk, a#przycisk:visited, a#przycisk:active z tłem, którym jest nasz przycisk. Tutaj tło będzie wyświetlane w pozycji "top".

Niżej, tworzymy identyfikator a#przycisk:hover, z tymi samymi atrybutami, lecz ze zmienioną pozycją wyświetlania tła. W przeciwieństwie jednak do wcześniejszych deklaracji, tutaj nasze tło będzie miało pozycję "bottom".

Wszystko, jak na zrzucie.

Opisując kolejne wartości, co one oznaczają:
background - ustawia tło. Najpierw zadeklarowaliśmy, że chcemy wyświetlić plik "przycisk.png", jeśli nie będzie go na serwerze zostanie wyświetlone białe tlo. Obrazek ma się nie powtarzać, a jego pozycja wyświetlania to "top".
width - szerokość obrazka
height - wysokość obrazka
display (block) - wyrażę się dość potocznie - wymusza wyświetlenie obrazka.

Dla "hover" wszystko wygląda tak samo, z tą różnicą, że obrazek wyświetla się od dołu, a nie od góry.

Jaki jest efekt dokonanych czynności? Obrazek zaraz po załadowaniu się strony jest tym górnym, a po najechaniu na niego, zamienia się na ten, który znajdował się na dole.