W tym poradniku postaram się wyjaśnić jak koduje się obrazkowe przyciski z zaokrąglonymi rogami jeśli nie wiemy ile będzie w nich tekstu, a co za tym idzie nie ma on konkretnej szerokości. Taki przypadek może się zdarzyć np. przy budowie CMSa gdzie nie możemy przewidzieć jakie napisy umieści użytkownik w menu.

Grafika

Finalnie nasza praca ma wyglądać tak:

Jak widać przy większej ilości tekstu grafika musi się się rozszerzać. Aby tak było trzeba to sprytnie zakodować. Najpierw jednak musimy przygotować dwie grafiki. Jedną która będzie się składała tylko z prawych zaokrągleń i druga która będzie bardzo szeroką wersją buttonu ale bez zaokrągleń po prawej. Dokładniej to potrzebujemy takich obrazków:

Ważne jest to aby obrazki miały jednolite lub prawie jednolite tło. W tym przypadku jest ono białe.

Kod

Przy kodowaniu użyjemy pewnej sztuczki. Krótszy obrazek wstawimy jako tło linku przycisku a sam link wstawimy do diva któremu jako tło nadamy dłuższy obrazek. Dzięki temu krótsza grafika odpowiednio zasłoni tą dłuższą. Oto kod html:

<div class="przycisk"><a href="#">Przejdź do galerii zdjęć</a></div>

A poniżej kod CSS:

 .przycisk{
    height: 30px;
    background: url('left.png') no-repeat;
    display: block;
    float: left;
 }
 .przycisk a{
    height: 30px;
    background: url('right.png') right no-repeat;
    display: block;
    padding: 0 15px 0 15px;
    font: italic normal bolder 14px Georgia;
    text-decoration: none;
    color: #dadada;
    line-height: 30px;
 }

Jak widać obrazek right.png dosunęliśmy do prawej strony aby pojawił się w odpowiednim miejscu. Musieliśmy także użyć float: left aby wszystko przyjmowało możliwie najmniejszą szerokość. Kod w działaniu można zobaczyć pod tym linkiem.