Jak stworzyć button o zmiennej szerokości? (HTML/CSS)

Czy ktoś z Was mógłby podsunąć mi pomysł na realizację w/w zadania o ile
założymy, że nie chcemy przycisku systemowego lecz mamy własną wizję? Może
dla ułatwienia debaty załóżmy, że chcemy stworzyć przycisk w formie
prostokąta z zaokrąglonymi rogami. Nie wiemy jakiej szerokości będzie w nim
tekst więc nie wiemy jakiej szerokości będzie sam button. Czy da się zrobić
tak, że rozmiar poziomy przycisku będzie dynamiczny a grafika wewnątrz
będzie dostosowywała się poprzez powielanie jakiegoś jej fragmentu?

Witam,

Czy ktoś z Was mógłby podsunąć mi pomysł na realizację w/w zadania

Pozdr
Exe Very Cute

| Witam,

| Czy ktoś z Was mógłby podsunąć mi pomysł na realizację w/w zadania

Nie nadawać width / max-width ?

<button
  type="button"
  style="padding:0; border:0; background:url(kafelek.gif)"
Tutaj se kurna wpiszę jakiś tekst
</button

Pozdr
Exe Very Cute

| Nie nadawać width / max-width ?

Przykład:

<button
 type="button"
 style="padding:0; border:0; background:url(kafelek.gif)"
Tutaj se kurna wpiszę jakiś tekst
</button

No dobrze... a jak uzyskasz zaokrąglone jego krawędzie rozsuwane względem
siebie przez tekst w ten sposób?

<button
  type="button"
  style="padding:0; border:0; background:url(kafelek.gif);
position:relative; height:20px; border-radius:4px;
-moz-border-radius:4px; -webkit-border-radius:4px;"
Tutaj se kurna wpiszę jakiś tekst
<!--[if lte IE 7]
  <span style="position:absolute; top:0; left:0; width:4px; height:20px;
background:url(sqa/img/lewa.gif);"</span
  <span style="position:absolute; top:0; right:0; width:4px;
height:20px; background:url(sqa/img/prawa.gif);"</span
<![endif]--
</button

Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała na
9.5 i nowszych - tego nie wiem bo mam 9.26).
Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

Pozdr
Exe Very Cute

| No dobrze... a jak uzyskasz zaokrąglone jego krawędzie rozsuwane
| względem siebie przez tekst w ten sposób?

Z zaokrąglonymi rogami jest problem w obecnych czasach ;]
Ale to nie znaczy że się nie da, tylko jest "trochę śmiecia".
Oto ta masakra:

<button
 type="button"
 style="padding:0; border:0; background:url(kafelek.gif);
position:relative; height:20px; border-radius:4px;
-moz-border-radius:4px; -webkit-border-radius:4px;"
Tutaj se kurna wpiszę jakiś tekst
<!--[if lte IE 7]
 <span style="position:absolute; top:0; left:0; width:4px; height:20px;
background:url(sqa/img/lewa.gif);"</span
 <span style="position:absolute; top:0; right:0; width:4px; height:20px;
background:url(sqa/img/prawa.gif);"</span
<![endif]--
</button

Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała na
9.5 i nowszych - tego nie wiem bo mam 9.26).
Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

| Z zaokrąglonymi rogami jest problem w obecnych czasach ;]
| Ale to nie znaczy że się nie da, tylko jest "trochę śmiecia".
| Oto ta masakra:

| <button
|  type="button"
|  style="padding:0; border:0; background:url(kafelek.gif);
| position:relative; height:20px; border-radius:4px;
| -moz-border-radius:4px; -webkit-border-radius:4px;"
| Tutaj se kurna wpiszę jakiś tekst
| <!--[if lte IE 7]
|  <span style="position:absolute; top:0; left:0; width:4px;
| height:20px; background:url(sqa/img/lewa.gif);"</span
|  <span style="position:absolute; top:0; right:0; width:4px;
| height:20px; background:url(sqa/img/prawa.gif);"</span
| <![endif]--
| </button

| Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała
| na 9.5 i nowszych - tego nie wiem bo mam 9.26).
| Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

Albo pobawić się VMLem ;]

| Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała
| na 9.5 i nowszych - tego nie wiem bo mam 9.26).
| Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

Albo pobawić się VMLem ;]
http://snook.ca/technical/rounded_corners/
(gdzieś miałem lepszy przykład mieszanki VML | SVG | -moz-border, ale
zgubiłem :/)

 http://czywielkizderzaczhadronowzniszczylswiat.pl/

...nie, gdyż ponieważ się zepsuł ;]

Pozdr
Exe Very Cute

| Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała
| na 9.5 i nowszych - tego nie wiem bo mam 9.26).
| Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

| Albo pobawić się VMLem ;]
| http://snook.ca/technical/rounded_corners/
| (gdzieś miałem lepszy przykład mieszanki VML | SVG | -moz-border, ale
| zgubiłem :/)

Tego VMLa to ja, przyznam się bez bicia, nie znam.

 http://czywielkizderzaczhadronowzniszczylswiat.pl/

...nie, gdyż ponieważ się zepsuł ;]

Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała na
9.5 i nowszych - tego nie wiem bo mam 9.26).
Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

http://czywielkizderzaczhadronowzniszczylswiat.pl/

}

| Zadziała wszędzie (IE, Fx, Safari...) oprócz Opery (chyba że zadziała na
| 9.5 i nowszych - tego nie wiem bo mam 9.26).
| Dla IE trzeba komentarz i 2 dodatkowe obrazki, niestety.

Sądzę, że konstrukcję dla IE można zastosować dla pozostałych i wtedy
obejdzie się bez warunków. Jak sądzisz?

Pozdr
Exe Very Cute

Ale to nie jest dobre rozwiązanie. Obrazki nie przeskalują Ci się w
pionie. A np. Fx ma Ctrl++ który jest dosyć często używany,
i -moz-border-radius wtedy daje radę, a obrazek nie. Musiałbyś zastosować
4 obrazki, po jednym na każdy róg przycisku.