BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2017-11-16 / Вр:23:31 / просмотров: 192

Всем привет!
В сегодняшней статье я выложу красивую кнопку «В корзину» для интернет-магазина.
Эта кнопка не только оформлена красиво, но еще умеет добавлять количество товаров или же убавлять их при нажатии «-» и «+».
Если вы владеете основами 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" 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);">+</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>

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 781
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4278