Jump to content

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


VAOZ
 Share
Followers 1

Recommended Posts

Плавающая кнопка для вашего сайта. Наверняка вы замечали на многих сайтах такие кнопки, которые двигаются одновременно с прокруткой страницы. Частым примером таких кнопок может быть акция, заказ звонка или стрелка, позволяющая прокрутить страницу наверх. Принцип действия всех таких кнопочек основывается на свойстве 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; }

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
×
×
  • Create New...