19 Лютий 2013
6 914
Рубрика: уроки

Как удвоить продажи магазина при помощи одной кнопки?

Давайте я расскажу, как сделать крутую кнопку без использования изображений, на одном CSS + HTML.

Как сделать так, чтобы ваш магазин продавал больше товаров? Всё просто: нужно, чтобы люди чаще нажимали кнопку “Купить”. Сделать ваши цены конкурентоспособными я не смогу, а рассказать, как сделать красивую и приятную кнопку без использования изображений при помощи html+css – запросто. Поехали.

Кнопка будет выглядеть как на скриншоте сверху.

Теория

Как всегда, я постараюсь сделать всё без использования чего-либо, от чего можно отказаться. В этом случае мы откажемся от графики и сделаем кнопку при помощи html+css. То есть, чтобы кнопка заработала, вам не надо будет ничего загружать на хостинг, достаточно будет исправить html и добавить несколько строчек в css.

Градиент в CSS3 штука неблагодарная, его можно составлять вручную, а можно в онлайн-сервисах типа ColorZilla. Кстати, там же можно и научиться ручному составлению полутонов, полезный сервис.

Что делать?

Для начала выберем цвет градиента. В фотошопе подбираем основной цвет для кнопки. Я пошёл против толпы и выбрал зелёный, такого больше ни у кого нет. Далее выбранный цвет добавляем в генератор градиентов слева или справа в поле, отмеченное красным:

button-color-picker

Аналогично поступаем со вторым цветом, в который будет плавно переходить первый. Убеждаемся, что результат в блоке Preview нас устраивает и копируем получившийся css к себе.

Сама кнопка будет состоять из собственно объекта button и блока вокруг него, который будет добавлять цветную границу кнопки. В css нужно будет добавить стили для трёх объектов: кнопки, кнопки при наведении и для границы кнопки. У меня это выглядит так:

.great_btn {
color:#fff;
font-size:14px;
font-weight: bold;
text-shadow:0 1px 0 #757575;
padding:7px 0 8px 0;
margin:0;
cursor: pointer;
border:0;
border-top:1px solid #B8D970;
width: 190px;
border-radius: 2px;  
/* gradient */ 
background: #15c61b;
background: -moz-linear-gradient(top, #15c61b 0%, #08871b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#15c61b), color-stop(100%,#08871b));
background: -webkit-linear-gradient(top, #15c61b 0%,#08871b 100%);
background: -o-linear-gradient(top, #15c61b 0%,#08871b 100%);
background: -ms-linear-gradient(top, #15c61b 0%,#08871b 100%);
background: linear-gradient(to bottom, #15c61b 0%,#08871b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15c61b', endColorstr='#08871b',GradientType=0 ); 
/* gradient end */
}
.great_btn:hover{
background: #15c61b;
}
.great_btn_around{
box-shadow:0 1px 0 #fff;
border-radius: 3px;
border:1px solid #08871B;
width: 190px;
box-shadow: 0px 1px 3px #eee;
}

Код выше вы можете смело копировать себе в css. А полученный в генераторе код вставляйте между /* gradient */ и /* gradient end */. Или же оставляйте как есть, тогда у вас будет зелёная кнопка, как в примере шириной 190 пикселей.

Код html для вывода кнопки будет таким:

<div class="great_btn_around"><input class="great_btn" type="button" value="Купить сейчас" /></div>

В результате?

В итоге получаем красивую и простую в работе кнопку, которую можно полностью настроить под свой вкус за пару минут. Увидеть код в работе можно здесь:

Тепер я хочу бачити коментарі 9