Плавающая боковая кнопка на сайте
Приветствую всех посетителей сайта! Сегодня речь пойдет о плавающей боковой кнопке, наверняка, вы видели такой элемент на многих сайтах. Такая кнопка фиксируется в определенном месте экрана, чаще всего она прижата к боковой стороне слева или справа. И сколько бы посетитель не прокручивал страницу, она всегда будет на виду.
Частым примером таких кнопок является заказ звонка или консультации, вызов модального окна с дополнительной информацией или бонусом, форма авторизации или подписки, стрелки, позволяющие прокрутить страницу наверх или вниз. Преимущества плавающей кнопки налицо: она занимает минимум места, привлекает внимание посетителей, а также позволяет нужную информацию держать всегда на виду.
Установить такую кнопку на свой сайт довольно просто. Сначала стоит определиться с дизайном кнопки, будет она задана свойствами css или представлять собой изображение, созданное в графическом редакторе или скачанное из Интернета. Далее в теле страницы прописывается код самой кнопки, функция вызова и при необходимости добавляются стили.
Расположить кнопку удобнее всего с левого или правого бока, можно зафиксировать ее посередине, поднять к вехнему углу или опустить к нижнему углу - тут уже дело вкуса. Главное, чтобы кнопка вписывалась в дизайн и смотрелась гармонично на фоне других элементов сайта.
Для наглядного примера давайте установим кнопку с левой стороны сайта. Для кнопки я буду использовать изображение, сделанное в Фотошопе. В качестве надписи у меня вставлен текст "Скачать курс", так как цель кнопки - перенаправлять посетителей на страницу бесплатного курса.
Итак, приступим к установке кнопки.
Шаг 1. В файл стилей сайта style.css я допишу в самый конец несколько строк:
.bok_knopka {
display:block;
width:40px;
height:160px;
position:fixed;
left:0;
top:480px;
z-index: 9999;
}
Пояснение:
- строки width и height обозначают ширину и высоту изображения для кнопки, у меня размеры 40х160 рх, вы указываете свои;
- для position прописываем свойство fixed, именно оно делает кнопку фиксированной на одном месте;
- left и top задают месторасположение кнопки, в моем случае она прижата к левому краю (left:0) и сдвинута вниз на 480 рх, для того, чтобы расположить кнопку справа, вместо left напишите right:0.
Шаг 2. Изображение кнопки я загружаю в папку images на своем хостинге, где хранятся все картинки сайта.
Шаг 3. Для вывода кнопки достаточно вставить всего лишь одну строку кода перед закрывающимся тегом </body>:
<a href="http://sayt-s-nulya.ru/besplatnye_kursy_skachat.html" class="bok_knopka"><img alt="боковая кнопка" src="http://sayt-s-nulya.ru/images/bok_knopka.png" /></a>
В ней я прописала ссылку на страницу с бесплатным курсом и указала путь к изображению кнопки. Результат вы видите на данной странице - кнопка "Скачать курс" в левом нижнем углу (при просмотре сайта на ноутбуке с соотношением сторон 16:9). На компьютере или планшете она может быть расположена немного выше или ниже, это зависит от соотношения сторон.
Можно обойтись и вовсе без изображения, создав обычную прямоугольную кнопку силами css. В таком случае шаг 2 пропускается, а в файл стилей придется добавить чуть больше кода, чтобы "приукрасить" кнопку. В данном случае код будет таким:
.bok_knopka{
-webkit-transform: rotate(-90deg); /*поворот текста на 90 градусов*/
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
display:block;
position:fixed;
z-index:9999;
left:0; /*отступ слева*/
top:550px; /*отступ сверху*/
background:#2B96C6; /*цвет фона кнопки*/
font-size:1.2em; /*размер шрифта*/
color:#fff!important; /*цвет шрифта*/
text-align:center; /*выравнивание по центру*/
padding:10px 20px; /*отступы внутри кнопки*/
border-radius:5px; /*скругление углов кнопки*/
border:1px solid #fff; /*рамка вокруг кнопки*/
}
В шаге 3 для вывода простой кнопки без использования изображения используется такой код:
<a href="http://sayt-s-nulya.ru/besplatnye_kursy_skachat.html" class="bok_knopka">Скачать курс</a>
Результат такой установки будет выглядеть так: