Плавающая боковая кнопка на сайте

Приветствую всех посетителей сайта! Сегодня речь пойдет о плавающей боковой кнопке, наверняка, вы видели такой элемент на многих сайтах. Такая кнопка фиксируется в определенном месте экрана, чаще всего она прижата к боковой стороне слева или справа. И сколько бы посетитель не прокручивал страницу, она всегда будет на виду.  

Частым примером таких кнопок является заказ звонка или консультации, вызов модального окна с дополнительной информацией или бонусом, форма авторизации или подписки, стрелки, позволяющие прокрутить страницу наверх или вниз. Преимущества плавающей кнопки налицо: она занимает минимум места, привлекает внимание посетителей, а также позволяет нужную информацию держать всегда на виду.

Установить такую кнопку на свой сайт довольно просто. Сначала стоит определиться с дизайном кнопки, будет она задана свойствами 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>

Результат такой установки будет выглядеть так:











WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2018 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
??????.???????
ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!

  
   
боковая кнопка
Если вы хотите, чтобы при клике кнопка меняла цвет, то в код css добавьте свойство hover, где напротив background укажите код нужного цвета, в моем случае, это пепельно-серый #193A41.

.bok_knopka:hover  {
 background:#193A41; 
}

Вышеприведенный код можно использовать для создания кнопки "Наверх", возвращающей посетителя в начало страницы. Единственное, что придется подкорректировать - вместо ссылки на страницу сайта поставить знак решетки. Тогда при клике на кнопку будет происходить перемотка страницы вверх. 

То есть для кнопки с изображением код разметки будет выглядеть так:

<a href="#" class="bok_knopka"><img alt="боковая кнопка" src="http://sayt-s-nulya.ru/images/bok_knopka.png" /></a>, 

а для кнопки,  созданной с помощью css так:

 <a href="#" class="bok_knopka">Скачать курс</a>.

Вот таким простым способом, используя минимум кода, мы создали боковую кнопку для сайта, которую можно использовать под разные цели. Кому понравилась кнопка на основе созданного мной изображения, то в архиве под статьей вы найдете 12 заготовок без текста разного цвета размером 50х200рх в формате png. Добавляйте свой текст и кнопка готова! 

На этом материал завершаю, создавайте свои кнопки, используя данный код как основу либо как конечный результат.

Скачать архив с 12 кнопками с Гугл.Диска

Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).


P.S. Подписчики в этом выпуске рассылки бесплатно получат набор стилей для кнопок с Envato стоимостью 4 доллара. В наборе 50 стилей, этого предостаточно, чтобы создавать кнопки для любых целей.

Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!