Красивая кнопка «В корзину» для интернет-магазина

Всем привет!
В сегодняшней статье я выложу красивую кнопку «В корзину» для интернет-магазина.
Эта кнопка не только оформлена красиво, но еще умеет добавлять количество товаров или же убавлять их при нажатии «-» и «+».
Если вы владеете основами php, то вы сможете с легкостью применить этот код к своим интернет-магазинам. Вот, я эту кнопку применил к интернет-магазину, сделанному на WordPress + Woocommerce:

Кстати, а вот похожая статья, которую я писал недавно. Вы можете для кнопки использовать такой способ оформления – «Как сделать в input type кнопки «+» и «-» по бокам».

А я возвращаюсь к нашей кнопке. Вот так в живую она выглядит:

[ демонстрация кнопки ]

JS:

function change(objName, min, max, step) {
var obj = document.getElementById(objName);
var tmp = +obj.value + step;
if (tmp<min) tmp=min;
if (tmp>max) tmp=max;
obj.value = tmp;
}

CSS:

.input-number {
position: relative;
display: inline-block;
}

.form-control.form-number {
width: 110px;
margin-right: 12px;
border: 1px solid transparent;
text-align: center;
height: 50px;
float: left;
background: #ccc;
}

.btn-count-minus {
bottom: 0;
}
.btn-count-plus {
top: 0;
}

.btn-count {
position: absolute;
right: 0;
width: 30px;
height: 50%;
background: #60a645;
border-radius: 0;
text-align: center;
line-height: 25px;
font-size: 14px;
color: #fff;
z-index: 9999;
cursor: pointer;
}

.btn-default {
font-size: 14px;
color: rgb(255, 255, 255);
font-weight: bold;
text-transform: uppercase;
vertical-align: top;
display: inline-block;
background-color: rgb(96, 166, 69);
padding: 0 30px;
border-radius: 3px;
}

.btn-default:hover{
background-color:#7ad258;
}
.btn-default {
height: 50px;
line-height: 50px;
}

a {
text-decoration: none;
}

HTML:

<form>
<span class="input-number ">
<input id="amount" ENGINE="text" name="count" value="1" class="form-control form-number ">
<div class="btn-count btn-count-plus" value="+" onClick="change('amount',0,100, 1);">+</div>
<div class="btn-count btn-count-minus" value="-" onClick="change('amount',0,100,-1);">-</div>
</span>
<a rel="nofollow" href="#" class="btn-default">В корзину</a>
</form>

Конечно, вы можете использовать вместо знаков «+» и «-» иконки:

<form>
<span class="input-number ">
<input id="amount" type="text" name="count" value="1" class="form-control form-number ">
<div class="btn-count btn-count-plus" value="+" onClick="change('amount',0,100, 1);"><span class="glyphicon glyphicon-plus"></span></div>
<div class="btn-count btn-count-minus" value="-" onClick="change('amount',0,100,-1);"><span class="glyphicon glyphicon-minus"></span></div>
</span>
<a rel="nofollow" href="#" class="btn-default"><span class="glyphicon glyphicon-shopping-cart"></span> В корзину</a>
</form>

Вот и все! Если понравилась статья, жмите на кнопки соцсетей! А то странно как-то получается, всем нравятся статьи, но мало кто кликает по иконкам. Если действительно полезная информация, не жадничайте – дайте и другим найти ее через социальные сети!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Вебмастеру, для сайта