Некоторые проекты требуют вывода дополнительных элементов поверх окна сайта. В данной статье будет описан один из вариантов добавления плавающей кнопки или текста поверх других элементов сайта.
Итак, первое, что нужно сделать:
добавить данный участок кода сразу после открывающегося тега . В WordPress это будет в файле header.php:
Как не сложно догадаться, мы добавляем картинку и оборачиваем ее в ссылку. При желании картинку можно заменить любым текстом, обернутым в . Текст можно сделать вертикальным, добавить отступы (padding) и залить фон цветом. Будет похоже на кнопку.
Теперь осталось добавить подходящие стили для нашей плавающей кнопки:
.add_palitra display: block; width: 80px; height: 150px; position: fixed; right: 0; top: 200px; z-index: 99999; >
Параметры width и height — это ширина и высота изображения. Корректируйте их под себя. Параметр top — это отступ от верхнего края экрана. Если хотите скорректировать разную высоту под разные разрешения экрана, то добавьте что-то такое:
Кнопка наверх на JS / Scroll to top
Элемент z-index задает расположения элемента поверх всех остальных. Учтите, при изменении значения кнопка может «провалиться» под другие элементы.
right:0 — «прилепляет» картинку или текст к правой части экрана.
Это все. Мы создали кнопку поверх всех остальных элементов. Осталось придумать, куда она будет вести.
Если Вы хотите по кнопке выводить всплывающее окно с формой обратной связи, то можете воспользоваться плагинами Popup Maker иContact Form 7. Делается все достаточно просто:
- создаете подходящую форму обратной связи и прописываете для нее стили;
- Создаете новое всплывающее окно, вместо контента вставляете шорткод выбранной формы обратной связи;
- Выставляете все параметры (особенно размеры и позицию) всплывающего окна и сохраняете его;
- Копируете CSS класс созданного всплывающего окна (он виден в пункте меню «Все всплывающие окна») и добавляете его как еще 1 класс для вставленного тега . Получится что-то вроде:
2 комментария к “ Плавающая кнопка сбоку сайта на CSS + HTML ”
Красивые кнопки для сайта
И вот, как и обещал, публикую заметочку о том, как создать красивую кнопку для сайта с помощью html и css . Красивые кнопки на сайте служат для привлечения внимания пользователя к определенному элементу контента. Поэтому при создании сайта нежелательно использовать одновременно большое количество кнопок, так как они будут только отвлекать пользователя.
Делаем кнопку для сайта
Каскадные таблицы стилей позволяют использовать CSS 3 градиент для создания кнопок. Для начала нужно нарисовать макет кнопки в Photoshop, чтобы зрительно представлять, что вы хотели бы получить в итоге. Я не буду давать уроков Photoshop, потому что нарисовать прямоугольную кнопку с закругленными углами на 10 0 не так уж сложно. Тот кто знает как это делать – может пропустить следующий абзац.
Как сделать кнопку на верх используя HTML & CSS шаг за шагом || Button To TOP using HTML&CSS
Макет кнопки для сайта в PSD
Открываем Photoshop и создаем новый документ, далее выбираем инструмент «Прямоугольник с закругленными углами» и рисуем кнопку необходимых размеров. Затем в свойствах слоя выбираем «Наложение градиента» и подбираем необходимые цвета для кнопки. Можно также использовать обводку кнопки в 1px. На рисунке снизу то, что получилось у меня
Как вставить кнопку на сайт в html
Итак, макет создан, приступаем к верстке кнопки с помощью html и css . В шаблоне сайта или блога wordpress, в записи или на странице создайте ссылку, которая будет будущей кнопкой, присвоив ей класс «button» следующим образом:
Редактируем css стиль кнопки
Ссылка может куда либо вести, для этого нужно поменять знак «#» на адрес страницы, или выполнять какие либо другие действия. Переходим в файл style.css , который лежит в папке вашей темы, а также доступен в панели администратора на вкладке Внешний вид -> Редактор .
Добавляем следующий код в файл style.css :
a.button < color: #fff; /* Цвет текста ссылки */ text-decoration: none; /* Убираем подчеркивание ссылки */ text-shadow: 1px 1px 1px #000; /* добавляем тень для текста */ background: #ff8a2b; /* Цвет фона кнопки по умолчанию */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffc154′, endColorstr=’#ff8a2b’); /* Градиент кнопки */ background: -webkit-gradient(linear, left top, left bottom, from(#ffc154), to(#ff8a2b)); /* Градиент кнопки */ background: -moz-linear-gradient(top, #ffc154, #ff8a2b); /* Градиент кнопки */ background: gradient(linear, top, #ffc154, #ff8a2b); /* Градиент кнопки */ border: 1px solid #ff8a2b; /* Обводка кнопки */ border-radius: 10px; /* Радиус закругленых углов кнопки */ padding: 10px 35px; /* Внутреннии отступы кнопки */ >
Получаем красивую кнопку на сайте
В комментариях кода, я указал, чем управляют css команды. Меняя определенные параметры, то есть экспериментируя над кодом, вы можете создать красивые кнопки для сайта, которые вы хотели бы получить. Вы можете поменять цвет текста ссылки или цвет градиента для кнопки, радиус углов или цвет обводки. В общем, не бойтесь экспериментировать и пробовать что-то новое. Все в ваших руках. Вот что получилось в итоге у меня на сайте:
Если вы не совсем поняли мою заметку или есть дополнительные вопросы по поводу добавления кнопки для сайта — спрашивайте в комментариях или обращайтесь по контактам, указанным в верхней части блога , с удовольствием окажу вам помощь =)
Опубликовано: 3 ноября 2011
Другие полезные статьи на нашем блоге
- ⭐ Сайт на Elementor медленно загружается. Что делать? Привет! Хочу поделиться своим мнением про плагин для WordPress Elementor, и рассказать о том, почему сайты на Elementor получаются «плохими» и «медленными» в большинстве случаев. Парочка важных поправок Во-первых, сам…
- ⭐ Laravel или WordPress — что выбрать для своего сайта? Привет! Это статья для владельцев сайтов и для тех, кто хочет запустить свой Онлайн-проект или Интернет сервис. Ну, если ты придумал какой-то микро-стартап или нужен сайт для обслуживания твоего бизнеса…
- ⭐ Timeweb — отзыв и подробный обзор Привет! Timeweb — это компания, которая предоставляет услуги хостинга и VPS/VDS сервера в аренду. Этот пост можно воспринимть как отзыв о Timeweb, поскольку описывать я буду свой персонльный опыт работы…
- ⭐ Купить группу ВКонтакте По каким причинам Вам нужно купить группу или сообщество ВКонтакте? Возможно, Вы желаете купить группу с подписчиками и продолжить ее развивать, чтобы получать пассивный доход. Возможно, сообщество нужно для привлечения…
Источник: www.onwordpress.ru