Jump to content
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
VAOZ

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

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; }

 

Share this post


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

×