Правильный код кнопки

[sarjick]

Нужно сделать кнопку с округлыми краями и градиентом. И нельзя делать ее рисунком. Может кто знает пример простого решения?

Я делаю, например, так:
<a href="#" class="button"><img src="images/btnLeft.gif" align="absmiddle">enter<img src="images/btnRight.gif" align="absmiddle"></a>

Цсс имеет такой вид:

.button{
display:block;
background-image:url(../images/btnBg.gif);
background-repeat:repeat-x;
color:#292929;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
white-space:nowrap;
height:15px;
width:1px;
}
.button img{
width:10px;
height:15px;
}


В классе баттон задаю width:1px; чтобы он не растягивался по всей длине блока, в который он вложен. Из-за этого в Мазиле все плохо.

Надеюсь идея понятна :)

[KidsKilla]

<button type="submit"><span>gdrhgrth</span></button>

[sarjick]

По-моему это не ответ на мой вопрос. Ты так не считаешь?

[KidsKilla]

а помоему ответ. и ответ в разы лучший нежели

<a href="#" class="button"><img src="images/btnLeft.gif" align="absmiddle">enter<img src="images/btnRight.gif" align="absmiddle"></a>

[sarjick]

Ну хорошо, главное, что ты себя понимаешь.

[KidsKilla]

иногда полезно голову включать и не ждать пока за тебя разжуют и вот положат.

<button type="submit"><span><span><span> кнопка </span></span></span></button>

ксс:

BUTTON{border:none;background:transparent;vertical-align:middle;cursor:pointer;}
* HTML BUTTON{cursor:hand;margin:0 -1em;}
BUTTON *{background:url(../i/_sonnik/button_bg.gif) 0 0 repeat-x;line-height:20px;height:23px;display:block;padding:0;color:#fff;font-weight:bold;cursor:pointer;cursor:hand;}
BUTTON * *{background:url(../i/_sonnik/button_r.gif) 100% 0 no-repeat;}
BUTTON * * *{background:url(../i/_sonnik/button_l.gif) 0 0 no-repeat;padding:0 10px;}

[sarjick]

Спасибо, сам бы наверное не додумался.