Плавающая кнопка сбоку сайта на CSS + HTML
Некоторые проекты требуют вывода дополнительных элементов поверх окна сайта. В данной статье будет описан один из вариантов добавления плавающей кнопки или текста поверх других элементов сайта.
Итак, первое, что нужно сделать:
добавить данный участок кода сразу после открывающегося тега <body>. В WordPress это будет в файле header.php:
<a class="add_palitra" href="адрес сайта/путь ссылки"><img title="Кнопка палитра" src="адрес сайта/wp-content/ваш шабллон/путь к картинке" alt="buttons" /></a>Как не сложно догадаться, мы добавляем картинку и оборачиваем ее в ссылку. При желании картинку можно заменить любым текстом, обернутым в <div>. Текст можно сделать вертикальным, добавить отступы (padding) и залить фон цветом. Будет похоже на кнопку.
Теперь осталось добавить подходящие стили для нашей плавающей кнопки:
.add_palitra {display: block;width: 80px;height: 150px;position: fixed;right: 0;top: 200px;z-index: 99999;}
Параметры width и height — это ширина и высота изображения. Корректируйте их под себя. Параметр top — это отступ от верхнего края экрана. Если хотите скорректировать разную высоту под разные разрешения экрана, то добавьте что-то такое:
@media screen and (max-width: 480px) {.add_palitra {top: 100px !important;}}
Элемент z-index задает расположения элемента поверх всех остальных. Учтите, при изменении значения кнопка может «провалиться» под другие элементы.
right:0 — «прилепляет» картинку или текст к правой части экрана.
Это все. Мы создали кнопку поверх всех остальных элементов. Осталось придумать, куда она будет вести.
Если Вы хотите по кнопке выводить всплывающее окно с формой обратной связи, то можете воспользоваться плагинами Popup Maker иContact Form 7. Делается все достаточно просто:
- создаете подходящую форму обратной связи и прописываете для нее стили;
- Создаете новое всплывающее окно, вместо контента вставляете шорткод выбранной формы обратной связи;
- Выставляете все параметры (особенно размеры и позицию) всплывающего окна и сохраняете его;
- Копируете CSS класс созданного всплывающего окна (он виден в пункте меню «Все всплывающие окна») и добавляете его как еще 1 класс для вставленного тега <a href>. Получится что-то вроде:
<a class="add_palitra popmake-test-message" ...>
Мы создали простую кнопку с классом fixedbut, на которую назначили стиль. В стиле самое главное обратите на свойство position: fixed; — оно и позволяет кнопке всегда «плавать» на экране сайта, а bottom: x; right: x; устанавливают ее снизу, справа. Чтобы кнопка была по левому краю измените right на left. Остальные стили для красоты. Если вам требуется кнопка наверх, то можете в обоих случаях значение ссылки заменить на #. Страница перематывается наверх при клике на кнопку.
Но, поскольку они ведут отсчёт от краёв окна браузера, а мониторы имеют разное разрешение экрана, то лучше сразу правильно разместить блок, опираясь на свойства Собственно говоря, для большинства случаев: плавающие кнопки социальных сетей, счётчиков, формы заказа звонка, скрипт не требуется.