Перейти к содержанию

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


VAOZ
 Поделиться


Рекомендованные сообщения

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

В нижнюю часть сайта прописываем 

<div class="vaoz_ru">Бонус!</div> 
<div class="vaoz_ru" onclick="location.href='https://vaoz.ru/'">Бонус!</div> 

А в таблицу стилей 

.vaoz_ru { position: fixed; bottom: 20px; right: 20px; display: block; background: #2db700; color: #fff; text-decoration: none; padding: 6px 23px; font-size: 17px;} 
.vaoz_ru:hover { background: #222; }

 

Ссылка на комментарий
Поделиться на других сайтах


Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
 Поделиться


×
×
  • Создать...