Перейти к содержанию
alinalessioYandex

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

Рекомендуемые сообщения

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

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

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

d0a1d0bdd0b8d0bcd0bed0ba32.jpg

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вижу пару таких вариантов: 

1. переменные в языковых файлах возможно оборачивать в html -код

2 обернуть переменную или весь input 2-мя дивами(левая и правая части картинки с узорами), порезав картинку на три части:

 левая  и правая часть: post-20793-0-78498900-1405070613.png ,

средняя часть: post-20793-0-72193400-1405070653.png

(бекграунд переменной (repeat-x) )

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


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

div{background:black}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
div{background:url(картинко) no-repeat left center black;}
input:{background:url(картинко) no-repeat right center; padding:0 nnn}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Черный фон в кнопке не нужен. Достаточно просто одной 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;
}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

hover нужно на див

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


<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(вензельактивный)

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.