Отправить изображение кнопки

Я хочу использовать кнопку Submit Button вместо стандартной кнопки. Я искал в Google и SO и получил несколько разных способов.

Каков правильный способ использования изображения в качестве кнопки отправки?

Также я хотел бы добавить три состояния для кнопки - normal, hover, onclick

Что я пробовал

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;
    text-indent:-9999px;
    width:109px;
    height:41px;
}

Что отображается

enter image description here

Что должно отображаться

enter image description here

Ответы

Ответ 1

Отредактировано:

Я думаю, что вы пытаетесь сделать это в DEMO

Существует три состояния кнопки: нормальный, зависающий и активный

Вам нужно использовать CSS-спрайты для состояний кнопок.

См. "Тайна CSS-спрайтов" 

/*CSS*/

.imgClass { 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{ 
  background-position:  0px -52px;
}

.imgClass:active{
  background-position:  0px -104px;
}
<!-- HTML -->
<input type="submit" value="" class="imgClass" />

Ответ 2

<input type="image" src="path to image" name="submit" />

UPDATE:

Для состояний кнопок вы можете использовать type = "submit", а затем добавить к нему класс

<input type="submit" name="submit" class="states" />

Затем в css используйте фоновые изображения для:

.states{
background-image:url(path to url);
height:...;
width:...;
}

.states:hover{
background-position:...;
}

.states:active{
background-position:...;
}

Ответ 3

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Если стандартная кнопка отправки имеет TYPE="submit", теперь мы имеем TYPE="image". Тип изображения по умолчанию представляет собой кнопку отправки формы. Более простой

Ответ 4

Очень важно для удобства доступа вы всегда указываете значение отправки, даже если вы скрываете этот текст, или если вы используете <input type="image" .../> для указания атрибута alt="" для этого поля ввода.

Слепые люди не знают, что будет делать кнопка, если она не содержит значимых alt="" или value="".

Ответ 5

Вам нужно удалить границы и добавить фоновое изображение на вкладке.

.imgClass { 
    background-image: url(path to image) no-repeat;
    width: 186px;
    height: 53px;
    border: none;
}

Это должно быть хорошо сейчас, обычно.