Плавающие кнопки на сайте: 5 способов создания и настройки

Для кого эта статья:

• веб-разработчики и дизайнеры, интересующиеся улучшением пользовательского интерфейса
• предприниматели и владельцы сайтов, желающие повысить конверсию

• студенты и начинающие разработчики, обучающиеся созданию веб-приложений

  Плавающие кнопки стали незаменимым элементом современных веб-интерфейсов — от скролла наверх до мессенджеров и корзин покупок. Если вы замечали эти элегантные кнопки, следующие за вами при прокрутке страницы, значит, они работают. Добавление такой кнопки может повысить конверсию сайта на 15-25%, улучшить юзабилити и сократить путь пользователя к целевому действию. 🚀 Я расскажу о пяти проверенных методах их внедрения — от простого кода для новичков до продвинутых решений для профессионалов.

Хотите не только добавлять кнопки, но и создавать впечатляющие веб-сайты целиком? Программа Обучение веб-разработке от Skypro погружает в мир фронтенд-разработки с нуля до профессионального уровня. Вы освоите не только базовые элементы интерфейса, но и продвинутые техники создания интерактивных веб-приложений. 85% выпускников находят работу в течение 3 месяцев после завершения курса. Начните создавать современные сайты уже через 6 месяцев!

Что такое плавающая кнопка и зачем она нужна сайту

Плавающая кнопка (Float Action Button или FAB) — это интерактивный элемент интерфейса, который остаётся видимым при прокрутке страницы, "плавая" в определённой позиции экрана. Обычно такие кнопки имеют круглую или прямоугольную форму и выделяются на фоне основного контента ярким цветом или контрастным дизайном.

Эта небольшая деталь интерфейса решает несколько ключевых задач:

• Мгновенный доступ к важным функциям сайта независимо от положения пользователя на странице
• Сокращение пути пользователя к целевому действию (звонок, заказ, подписка)
• Повышение конверсии благодаря постоянной доступности кнопки призыва к действию
• Улучшение пользовательского опыта на длинных страницах (например, кнопка "Наверх")
• Интеграция мессенджеров и обратной связи без перегрузки основного интерфейса

Артём Вольский, технический директор

Однажды мы работали над интернет-магазином, который переживал катастрофическое падение конверсии. Аналитика показывала, что пользователи доходили до интересующих товаров, но уходили, не добавляя их в корзину. Оказалось, что на мобильных устройствах кнопка добавления в корзину оказывалась "погребенной" под массой информации о товаре.

Решением стала плавающая кнопка "В корзину", которая следовала за пользователем при изучении товара. Результат превзошёл ожидания: конверсия выросла на 34% в течение первого месяца. Иногда простейшие изменения в интерфейсе дают максимальный эффект — важно лишь понимать боли пользователей.

Наиболее распространённые типы плавающих кнопок, которые вы можете добавить на свой сайт:

Создание плавающей кнопки с помощью HTML и CSS

Давайте начнем с самого простого и доступного способа добавления плавающей кнопки — использования чистого HTML и CSS. Этот метод не требует глубоких знаний программирования и подойдет для тех, кто хочет быстро интегрировать базовую функциональность. 🛠️

Для создания простой плавающей кнопки "Наверх" вам потребуется лишь несколько строк кода:

<!-- HTML-разметка кнопки -->
<a href="#" class="float-button" id="back-to-top">
<i class="arrow-up">↑</i>
</a>

<!-- CSS для стилизации -->
<style>
.float-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #4285f4;
color: white;
text-align: center;
line-height: 50px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
text-decoration: none;
z-index: 1000;
transition: all 0.3s;
}

.float-button:hover {
background-color: #3367d6;
transform: scale(1.1);
}

.arrow-up {
font-size: 24px;
}
</style>

Основные CSS-свойства, которые делают кнопку "плавающей":

• position: fixed — главное свойство, позволяющее кнопке оставаться на месте при прокрутке страницы
• bottom/right — определяют позиционирование кнопки относительно края окна браузера
• z-index — обеспечивает расположение кнопки поверх других элементов страницы
• transition — добавляет плавную анимацию при наведении курсора

Для создания кнопки с иконкой вместо текста, можно использовать популярные библиотеки иконок, такие как Font Awesome или Material Icons:

<!-- Подключаем Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- HTML-разметка кнопки с иконкой -->
<a href="#" class="float-button" id="chat-button">
<i class="fas fa-comment"></i>
</a>

Чтобы адаптировать кнопку для мобильных устройств, добавьте медиа-запросы, которые изменят размер и позиционирование:

@media (max-width: 768px) {
.float-button {
width: 40px;
height: 40px;
line-height: 40px;
bottom: 10px;
right: 10px;
}

.arrow-up {
font-size: 18px;
}
}

Мария Светлова, UI/UX дизайнер

Работая над редизайном сайта финансового сервиса, я столкнулась с интересной задачей: клиенты не могли быстро найти калькулятор на длинных страницах с описаниями услуг. В аналитике мы увидели, что 70% пользователей бросали страницу, не дойдя до калькулятора — ключевого элемента конверсии.

Мы разработали минималистичную плавающую кнопку с иконкой калькулятора. Важно было не отвлекать от контента, но сделать её заметной. Использовали полупрозрачный дизайн, который становился ярче при наведении. Через неделю число расчётов выросло на 45%. Это подтвердило моё правило: хороший интерфейс не должен заставлять пользователя думать — он должен предугадывать его потребности.

JavaScript для интерактивности: оживляем плавающую кнопку

Чистый CSS позволяет создать статичную плавающую кнопку, но для настоящей интерактивности необходим JavaScript. Давайте рассмотрим, как добавить динамическое поведение и сделать кнопку по-настоящему функциональной. ✨

Начнём с самого распространённого сценария — кнопки "Наверх", которая появляется только после прокрутки страницы на определенное расстояние:

// HTML остаётся таким же, как в предыдущем разделе

// JavaScript для управления видимостью и функциональностью
document.addEventListener("DOMContentLoaded", function() {
const backToTopButton = document.getElementById("back-to-top");

// Скрываем кнопку при загрузке страницы
backToTopButton.style.opacity = "0";
backToTopButton.style.visibility = "hidden";

// Слушаем событие скролла
window.addEventListener("scroll", function() {
if (window.pageYOffset > 300) {
backToTopButton.style.opacity = "1";
backToTopButton.style.visibility = "visible";
} else {
backToTopButton.style.opacity = "0";
backToTopButton.style.visibility = "hidden";
}
});

// Добавляем функционал плавной прокрутки наверх
backToTopButton.addEventListener("click", function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
});

Для создания более сложных интерактивных кнопок, например, кнопки чата или обратного звонка, можно использовать следующий подход:

// HTML разметка для кнопки чата
<div class="float-chat-button" id="chat-button">
<i class="fas fa-comment"></i>
<span class="chat-tooltip">Задайте вопрос</span>

<div class="chat-panel" id="chat-panel">
<div class="chat-header">
<h3>Онлайн-консультант</h3>
<button class="close-chat"><i class="fas fa-times"></i></button>
</div>
<div class="chat-body">
<p>Здравствуйте! Чем могу помочь?</p>
<textarea placeholder="Введите ваш вопрос..."></textarea>
<button class="send-message">Отправить</button>
</div>
</div>
</div>

// JavaScript для функциональности чата
document.addEventListener("DOMContentLoaded", function() {
const chatButton = document.getElementById("chat-button");
const chatPanel = document.getElementById("chat-panel");
const closeButton = document.querySelector(".close-chat");

// Изначально скрываем панель чата
chatPanel.style.display = "none";

// Открываем панель при клике на кнопку
chatButton.addEventListener("click", function(e) {
if (e.target.closest(".chat-panel") === null) {
chatPanel.style.display = chatPanel.style.display === "none" ? "block" : "none";
}
});

// Закрываем панель при клике на кнопку закрытия
closeButton.addEventListener("click", function() {
chatPanel.style.display = "none";
});

// Добавляем анимацию пульсации для привлечения внимания
setInterval(function() {
chatButton.classList.add("pulse");
setTimeout(function() {
chatButton.classList.remove("pulse");
}, 1000);
}, 5000);
});

Рассмотрим несколько продвинутых техник для улучшения плавающих кнопок:

Готовые библиотеки и фреймворки для быстрой интеграции

Не всегда есть время и необходимость писать код с нуля. Для ускорения разработки существуют готовые библиотеки, которые предлагают широкий функционал для создания плавающих кнопок. 🧩

Вот несколько популярных JavaScript-библиотек, специализирующихся на создании плавающих элементов:

• Material UI FAB — реализует компоненты Material Design, включая плавающие кнопки действия с разнообразными стилями и анимациями
• jQuery Float Button — лёгкий плагин для jQuery, обеспечивающий быстрое создание настраиваемых плавающих кнопок
• Bootstrap Floating Labels — компонент для фреймворка Bootstrap, позволяющий создавать плавающие элементы в соответствии с дизайн-системой Bootstrap
• Tailwind CSS Float Elements — набор утилит для создания плавающих элементов в экосистеме Tailwind CSS
• React Floating Button — компонент для React-приложений с поддержкой всех современных возможностей и состояний

Рассмотрим пример интеграции плавающей кнопки с использованием библиотеки Material UI для React:

// Установка библиотеки
// npm install @material-ui/core @material-ui/icons

// Импорт в компонент React
import React from 'react';
import { Fab, Zoom } from '@material-ui/core';
import { KeyboardArrowUp, Chat, ShoppingCart } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';

// Определение стилей
const useStyles = makeStyles((theme) => ({
fab: {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
zIndex: 1000,
},
fabSecondary: {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(10),
zIndex: 1000,
}
}));

// Компонент с плавающими кнопками
function FloatingButtons() {
const classes = useStyles();
const [visible, setVisible] = React.useState(false);

// Отслеживание скролла для показа/скрытия кнопки
React.useEffect(() => {
const handleScroll = () => {
if (window.pageYOffset > 300) {
setVisible(true);
} else {
setVisible(false);
}
};

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

// Функция для скролла наверх
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};

return (
<>
{/* Кнопка "Наверх" с анимацией появления */}
<Zoom in={visible}>
<Fab 
color="primary" 
aria-label="scroll-to-top" 
className={classes.fab}
onClick={scrollToTop}
>
<KeyboardArrowUp />
</Fab>
</Zoom>

{/* Кнопка чата, всегда видимая */}
<Fab 
color="secondary" 
aria-label="chat" 
className={classes.fabSecondary}
>
<Chat />
</Fab>
</>
);
}

export default FloatingButtons;

Если вы используете Vue.js, вот пример с библиотекой Vuetify:

<template>
<div>
<v-fade-transition>
<v-btn
v-show="visible"
fab
color="primary"
fixed
bottom
right
@click="scrollToTop"
>
<v-icon>mdi-arrow-up</v-icon>
</v-btn>
</v-fade-transition>
</div>
</template>

<script>
export default {
data() {
return {
visible: false
};
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > 300;
},
scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
}
};
</script>

Плагины для CMS: добавляем кнопку на WordPress и другие

Для владельцев сайтов на популярных CMS самый быстрый и беззаботный способ добавления плавающей кнопки — использование готовых плагинов. Это идеальное решение, если вы не хотите погружаться в код или не имеете технических навыков. 🔌

Рассмотрим лучшие плагины для самых популярных CMS-систем:

Для WordPress:

• Buttonizer — многофункциональный плагин для создания красивых плавающих кнопок с расширенными опциями настройки и интеграцией с WhatsApp, Telegram и другими сервисами
• WP Floating Menu Pro — плагин для создания не только одиночных кнопок, но и целых плавающих меню
• Scroll Back to Top — простой и лёгкий плагин специально для кнопки "Наверх" с минимальным влиянием на производительность
• Shared Counts — плагин для создания плавающей панели социальных кнопок
• CallNow Button — создаёт кнопку звонка, особенно полезную для мобильных пользователей

Процесс добавления плавающей кнопки на WordPress с помощью плагина Buttonizer:

1. В панели администратора выберите Плагины → Добавить новый
2. В поиске введите "Buttonizer" и установите плагин
3. Активируйте плагин и перейдите в раздел Buttonizer → Настройки
4. Нажмите "Добавить новую кнопку" и выберите нужный тип (чат, звонок, ссылка и т.д.)
5. Настройте внешний вид: цвет, иконку, размер, позицию на экране
6. Укажите действие при клике: URL, телефон, JavaScript-функция
7. Настройте правила отображения: на каких страницах показывать, для каких устройств
8. Сохраните настройки и проверьте работу кнопки на сайте

Для других популярных CMS:

Если вы используете конструктор Elementor для WordPress, процесс ещё проще:

1. Откройте страницу в редакторе Elementor
2. Перетащите виджет "Кнопка" в область редактирования
3. В разделе "Дополнительно" найдите опцию "Позиция" и выберите "Фиксированная"
4. Укажите расположение относительно экрана (право/лево, верх/низ)
5. Настройте внешний вид и действие при клике

Важные моменты, которые стоит учесть при использовании плагинов для плавающих кнопок:

• Регулярно обновляйте плагины для обеспечения безопасности и совместимости
• Внимательно выбирайте цветовую гамму для сохранения целостности дизайна сайта
• Не перегружайте страницу слишком большим количеством плавающих элементов
• Проверяйте работу на мобильных устройствах — кнопки не должны перекрывать важный контент
• Используйте аналитику для отслеживания эффективности внедрённых кнопок

Внедрение плавающих кнопок — это не просто добавление модного элемента дизайна, а стратегический инструмент улучшения пользовательского опыта. Независимо от выбранного метода — ручного кодирования, готовых библиотек или плагинов CMS — ключом к успеху будет правильное понимание нужд ваших пользователей. Помните, что даже самая красивая кнопка бесполезна, если она не решает реальную проблему. Экспериментируйте, тестируйте и анализируйте — только так вы найдёте идеальный вариант для вашего сайта.