[BleSSeD]

Как сделать так,чтобы вместо обычной кнопки было изображение? желательно это сдлеать через css.

[Асмодиан]

Собственно так.
<input type="image" src=...
Хотя это и не через css
Если тебе нудна лишь подложка кнопки, а текст на кнопке быть таки должен, то делаем так:
<input class="button" type="submit"...

.button
{
    border:none;
    background:no-repeat left top url(images/button.gif);
    width:200px;
    height: 20px;
    line-height:20px;
    text-align:center;
}

тут width и height должны быть константами, и кнопка получиться фиксированного размера. padding задавать нельзя, так как получим различные результаты для нормальных и IE. вертикального выравнивания нет, посему добиваемся его посредством line-height. Приведённое мной значение наверняка не идеальное

Но если фиксированность кнопки вызывает оскомину, то мона воспользоваться замосткой background-а.

.button
{
    border:none;
    background:repeat-x left top url(images/buttonb.gif);
    height:20px;
    line-height:20px;
    padding:0px 10px;
}

тут мы ставим padding, чтобы текст на кнопке не впечатывался в неё слева и справа. padding по вертикали использовать нельзя по вышеуказанным причинам, посему вместо него line-height.

Отсутствие border-а очень важно, так как если указать хоть какой-либо бордер хоть для одной границы, IE нарисует вам суперомерзительный 3d бордер в 2 пикселя а ваш уже поверх . Если кто знает, как поставитьь свой бордер, избежав IE-шный, прошу написать

[BleSSeD]

но у меня много кнопок, а рисунок надо только одной. я ей присваиваю id

<input type="submit" value="submit" id="good">

а потом в стилях пишу

.good {
border:none;
background:no-repeat left top url(templates/orange101/images/site/img-login.jpg);
width:200px;
height: 20px;
line-height:20px;
text-align:center;
}

но оно вообще не реагирует! почему?

[Асмодиан]

потому что в css идентификаторы записываются с решоткой, а не с точкой
#good
{
...
}

[BleSSeD]

да, что то я затупил