Dnia Thu, 28 May 2009 17:09:32 +0200, Marek napisał(a):

>[...]Załóżmy prosty przypadek, że grafika jest cieniowanym z
> góry do dołu prostokątem o zaokrąglonych rogach. Zastosowany gradient
> pozwala na powtarzanie się w poziomie tła. Wlewamy w niego 1 linię
> tekstu, którego szerokość wpływa na szerokość całego buttona. Grafika ma
> się dopasować automatycznie.

Czyli przypadek podręcznikowy :)

HTML:

<a class="guzik" href="#" onclick="akcja();return
false"><span><span>linijka tekstu</span></span></a>

CSS:

a.guzik {
background-image: url(gradient.gif);
background-repeat: repeat-x;
}

a.guzik span {
background-image: url(lewastrona.gif);
background-position: top left;
background-repeat: no-repeat;
}

a.guzik span span {
background-image: url(prawastrona.gif);
background-position: top right;
}

Pomijam tu display, padding i takie tam :)

Można też z jednym spanem - wtedy background dla <a> obejmuje lewą stronę
+ tło o szerokości równej maksymalnej szerokości takiego "buttona".

Zakładam tu, że może być użyty <a> a nie <input> (nie każda przeglądarka
pozwala na stylowanie sobie inputów wedle własnego widzimisię).

Pasuje?

ethanak
--
mailto=window.atob('ZXRoYW5ha0Bwb2xpcC5jb20=');
http://milena.polip.com/ - nie czekam na Ivo!