Manipulacja wyglądu przycisku 'Odpowiedz'

Przycisk 'Odpowiedz' pojawia się pod komentarzami do wpisów. Jego wygląd opiera się całkowicie na dwóch obrazkach o wymiarach 66 na 16 pikseli – jednego dla stanu w spoczynku i drugiego wyświetlanego wtedy, kiedy wskaźnik myszy znajduje się nad przyciskiem. Tekst etykiety przycisku ( 'Odpowiedz' ) jest częścią obrazków. Pierwsza opcja przy zmianie przycisku polega na podmianie jednego lub obu obrazków przedstawiających przycisk:

ul.comments-list .comment-meta .comment-reply{
background-image: url(adres.obrazka);
}

ul.comments-list .comment-meta .comment-reply:hover{
background-image: url(adres.drugiego.obrazka);
}

Fragmenty tekstu 'adres.obrazka' oraz 'adres.drugiego.obrazka' w powyższym kodzie należy zastąpić absolutnymi adresami plików obrazków przedstawiających przycisk w dwóch stanach.


Druga opcja zmiany wyglądu przycisku nie wymaga obecności obrazków i opiera się tylko na kodzie CSS. Oto przykład:

/* przycisk bez wskaźnika myszy */
ul.comments-list .comment-meta .comment-reply{
background: #7DB6F5;  /* kolor tła */
color: white;  /* kolor tekstu */
font-weight: bold;  /* pogrubienie tekstu */
padding: 2px 5px; /* wielkość przycisku */
border-radius: 3px; /* narożniki przycisku */
}

/* przycisk i wskaźnik myszy */
ul.comments-list .comment-meta .comment-reply:hover{
background: white;
color: #478DB3;
}

/* wyświetlenie etykiety */
ul.comments-list .comment-meta .comment-reply span {
visibility: visible;
}