Как создать плавающую кнопку на сайте html + css
Наверняка вы видели на многих сайтах кнопки, которые двигаются одновременно с прокруткой страницы. Частым примером таких кнопок может быть акция, заказ звонка или стрелка, позволяющая прокрутить страницу наверх.
Принцип действия всех таких кнопочек основывается на свойстве position: fixed; Рассмотрим html структуру ниже:
Мы создали простую кнопку с классом fixedbut, на которую назначили стиль. В стиле самое главное обратите на свойство position: fixed; — оно и позволяет кнопке всегда «плавать» на экране сайта, а bottom: 20px; right: 20px; устанавливают ее снизу, справа. Чтобы кнопка была по левому краю измените right на left. Остальные стили для красоты.
Но наша кнопка не активна на клик. Давайте добавим переход на любую страницу, по ее клику. Это можно сделать так:
или с помощью обычной ссылки:
В первом случае мы использовали JavaScript, а во втором html разметку.
Если вам требуется кнопка наверх, то можете в обоих случаях значение ссылки заменить на #. Страница перематывается наверх при клике на кнопку.
Рассмотрим еще пару плюшек, которые вам могут пригодиться не только в этом проекте.
«Плавающая» кнопка
Подскажите, пожалуйста, как сделать кнопку «онлайн-консультант» так, чтобы эта кнопка всегда находилась слева и не проматывалась вместе со страницей, а как бы «плавала» за окном или просто находилась на фиксированном месте (x:1 y:1).
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 21 сен 2011 в 0:16
306 1 1 золотой знак 5 5 серебряных знаков 16 16 бронзовых знаков
Это означает поверх всех имеющихся окон 999
13 мар 2018 в 14:58
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
button .fixed_button < position:fixed; /*задаём тип позиции, в нашем случае - фиксированная*/ top:100px; /* отступ сверху*/ left:0px; /* отступ слева*/ width:100px; /* ширина кнопки*/ height:35px; /* высота кнопки*/ z-index:999; /*позиция относительно дальности*/ >Отслеживать
ответ дан 21 сен 2011 в 0:18
585 3 3 серебряных знака 8 8 бронзовых знаков
Я пробовал, но IE почему-то показывает ее неправильно. Причем не только у меня. Chrome и Firefox — отлично, а IE просто вставляет рисунок в том месте, где написан код. Что еще посоветуете?
21 сен 2011 в 0:23
Стоп, а что за «позиция относительно дальности». я ее не писал. Что это означает?
21 сен 2011 в 0:24
21 сен 2011 в 0:30
- javascript
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Фиксированная (плавающая) кнопка на сайте сбоку
- Stats: 34324 8
- Author: admin
- Category: CMS WordPress, Css, Дизайн, Кнопки, Статті
- Comments: 2 комментария
- Tags: плавающая кнопка, фиксированная кнопка
В примере — мы разместили плавающую картинку справа сайта в шаблоне WordPress
Итак начнем:
1. В стиле шаблона размещаем стиль кнопки:
.add_palitra display: block;
width: 80px;
height: 150px;
position: fixed;
right: 0;
top: 200px;
z-index: 99999;
>
Где:
width:80px; — ширина картинки.
height:150px; — высота картинки.
right:0; — отступ справа, если вы поменяете данную строчку на left:0; — то кнопка будет располагаться слева, также можно указать отступ в пикселях, например: left:20px;
top:200px; — верхний отступ.
z-index: 99999; — задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.
2. Заходим в файл header.php — — для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл header.php.
В нем сразу после тега body вставляем вывод нашей кнопки:
Как видите это код обычной ссылки, только для нее задан особый класс —
class=»add_palitra» , стиль оформления которого мы прописали в пункте 1 данной статьи.
Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.
Если у вас есть доп. эффекты — будем рады если прикрепите их в комментарии.
Плавающая кнопка сбоку сайта на CSS + HTML
Некоторые проекты требуют вывода дополнительных элементов поверх окна сайта. В данной статье будет описан один из вариантов добавления плавающей кнопки или текста поверх других элементов сайта.
Итак, первое, что нужно сделать:
добавить данный участок кода сразу после открывающегося тега . В WordPress это будет в файле header.php:
Как не сложно догадаться, мы добавляем картинку и оборачиваем ее в ссылку. При желании картинку можно заменить любым текстом, обернутым в . Текст можно сделать вертикальным, добавить отступы (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 класс для вставленного тега . Получится что-то вроде:
2 комментария к “ Плавающая кнопка сбоку сайта на CSS + HTML ”
Мы создали простую кнопку с классом fixedbut, на которую назначили стиль. В стиле самое главное обратите на свойство position: fixed; — оно и позволяет кнопке всегда «плавать» на экране сайта, а bottom: x; right: x; устанавливают ее снизу, справа. Чтобы кнопка была по левому краю измените right на left. Остальные стили для красоты. Если вам требуется кнопка наверх, то можете в обоих случаях значение ссылки заменить на #. Страница перематывается наверх при клике на кнопку.
Но, поскольку они ведут отсчёт от краёв окна браузера, а мониторы имеют разное разрешение экрана, то лучше сразу правильно разместить блок, опираясь на свойства Собственно говоря, для большинства случаев: плавающие кнопки социальных сетей, счётчиков, формы заказа звонка, скрипт не требуется.