Jump to content
Sign in to follow this  
alinalessioYandex

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

Recommended Posts

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

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

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

d0a1d0bdd0b8d0bcd0bed0ba32.jpg

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites


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

div{background:black}

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

Share this post


Link to post
Share on other sites

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

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}

Share this post


Link to post
Share on other sites

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

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

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
div{background:url(картинко) no-repeat left center black;}
input:{background:url(картинко) no-repeat right center; padding:0 nnn}

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

hover нужно на див

Share this post


Link to post
Share on other sites


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

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.