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

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

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

Также я хотел бы добавить три состояния для кнопки - нормальный, парить, 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

источник

2012-08-02 Harsha M V

Либо удалить 'text-indent' и добавить' value = "Подписаться" 'в' 'или добавить буквы' Подписаться' на картинке – asprin

@Harsha M V: См. Мой ответ ниже. –

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

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

Есть три состояния кнопки: нормальный, наведите и активно

Для состояний кнопок вам необходимо использовать CSS Image Sprites.

See The Mystery of CSS Sprites

/*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" />

источник

2012-08-02 07:05:40

спасибо .... :) –

Добро пожаловать –

со спрайтами. Я стараюсь избегать сокращения фона, чтобы свести к минимуму повторение. Используйте 'background-image' на' .imgClass' и 'background-position' для других состояний –

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

UPDATE:

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

<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:...; 
}

источник

2012-08-02 06:44:34 asprin

добавляет имя = отправить ключ? –

нет ключа добавляет type = "image" – Ibu

Что делать, если я хочу добавить состояния кнопок? –

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

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

Должно быть хорошо, нормально.

источник

2012-08-02 09:34:05 phndiaye

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

источник

2013-03-16 03:57:19 Ibnu

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

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

источник

2013-03-19 12:25:15

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

ответ

Смежные вопросы