» »

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

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

В этом мануале вы узнаете как поставить плавающею кнопку, которая будет находиться на одном расположение с правой или левой стороны на сайте. Когда происходит прокручивание вверх, вниз, то она зафиксирована в одном расположенном разделе. Безусловно вы видели на порталах, такую функцию как позвонить, так вот мы как раз и будет создавать такой эффект. Выставляя различную информацию, где прописать ссылку на переход к актуальному материалу или вызов модального окна.

По функциональности четко выраженная и разнообразная, что применение общедоступно на широком каркасе. Большинство ставят обратную связь, это можно заметить на такой тематике как магазин в сети. Плюс в функционале, это берет немного места, что если на главной странице это необходимость. Где визуально просматривается, что прописывают рекламные блоки. Возьмем за основу, как работает, где зависит от самого веб мастера. Как выяснилось, что это полезная штука, где использование следует для самых разноплановых задач.

Пример:

Как создать плавающую кнопку на сайте html + css

HTML

Код
<div style="cursor:pointer;" class="zornet" onclick="location.href='http://zornet.ru/'">ZORNET.RU</div>

CSS:

Код
.zornet {position: fixed;bottom: 19px;right: 19px;display: block;background: #0094b7;color: #eaeaea;text-decoration: none;padding: 7px 18px;font-size: 15px;border-radius: 3px;}
.zornet:hover { background: #353333; }

На тестовой площадке, проверено работоспособность кода.

Будут присутствовать плюшки, где вам предстоит скачать текстовый документ и в нем они прописаны.
30.09.2017 Загрузок: 1 Просмотров: 336 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar