Как кнопке input сделать фон из двух картинок?

[alinalessioYandex]

Кнопка "Купить" в Opencart выполнена через input.

Мне нужно оформить кнопку изображениями: один в начале слова, и то же изображение в конце.

Должно выглядеть так:

При этом хотелось бы чтобы кнопка была резиновой, т.е. Если в кнопке будет слово "Продолжить" или "Оформить заказ", все они оформлялись вензелем вначале слова и в конце.

 

Как достигнуть такой эффект для ссылки <a><span>Кнопка</span></a> понятно.

Но как сделать чтобы такой эффект был для кнопки input?

[chukcha]

<div><span></span><input /><span></span></div>

div{background:black}

span{display:inline-block; background:url(картинкО) no-repeat center; width: nnn;height:kkk}

[chukcha]

У предыдущего есть минусы

div{background:black; position:relative}
spanлевый{display:inline-block; position:absolute; left:0;background:url(картинкО) no-repeat center; width: nnn;height:kkk}
spanправый{display:inline-block; position:absolute; left:100%;background:url(картинкО) no-repeat center; width: nnn;height:kkk}
input:{padding:0 nnn}

[alinalessioYandex]

Спасибо. Помогло. Сделал так:

1. Обернул кнопку input в div

2. В стилях для div-a создал background картинку прижал к левому краю

3. В стилях для input background картинку прижал к правому краю.

4. Настроил маргины и педдинги.

 

Спасибо за участие.

[chukcha]

Какой способ помог?

[chukcha]

div{background:url(картинко) no-repeat left center black;}
input:{background:url(картинко) no-repeat right center; padding:0 nnn}

вот еще - - спортивный вариант

[alinalessioYandex]

Черный фон в кнопке не нужен. Достаточно просто одной png на прозрачном фоне, которую вставить до слова и после. И еще одно изоbражение для hover, чтобы при наведении цвет меняло.

 

Я сделал по совету, но хватило в input всего одного div.

Но с hover не очень корректно отображается.

Вот так выглядит разметка на input и на ссылку:

<div class="input_button_left"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
<a href="<?php echo $continue; ?>" class="button"><span><?php echo $button_continue; ?></span></a>

Теперь css:

input.button, a.button {
	background: url(../image/button_img.png) right center no-repeat;
	margin: 0;
	border: 0;
	text-align: left;
	padding: 0px 45px 0px 45px;
}
.input_button_left, a.button span {
	text-align: left;
	background: url(../image/button_img.png) left center no-repeat;
}
a.button:hover, input.button:hover {
	color: #fdcd8d;
	background: url(../image/button_img_hover.png) right center no-repeat;
}
.input_button_left:hover, a.button span:hover {
	background: url(../image/button_img_hover.png) left center no-repeat;
}

Проблема заключается в том, что в случае с ссылкой, при наведении курсора на слово "Продолжить" картинки меняются одновременно и справа и слева. А если навести на вензель справа, то вензель слева не меняется.

[chukcha]

hover нужно на див

[chukcha]

<div class="input_button_left">

    <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />

</div>

.input_button_left{

display:inline-block;

background: url(вензель)

}

.input_button_left:hover{

background: url(вензельактивный)

}

.input_button_left:hover input{

background: url(вензельактивный)

}

[alinalessioYandex]

Все верно. Спасибо. Вот так получилось как надо! И с ховерами все в порядке. Спасибо!