Микровзаимодействие
#floating-pulse-button•beginner•Тип: interaction
Пульсирующая фиксированная кнопка действия (Pulse FAB)
Фиксированная в углу экрана кнопка быстрого перехода или целевого действия с бесконечной кольцевой волной на CSS box-shadow, масштабированием при наведении и адаптацией под смартфоны.
#floating#fab#pulse#animation#call-to-action#fixed#box-shadow#microinteractions
Инженерный разбор & UX-логика
Компактная плавающая круглая или квадратная кнопка (FAB), зафиксированная в углу экрана (слева или справа), привлекающая внимание мягкой расходящейся световой волной.
💡 Почему это работает: Кольцевая волна создает непрерывный визуальный якорь на периферии зрения, увеличивая кликабельность (CTR) на 40-60% по сравнению со статичной кнопкой.
Где использовать
- Прямой переход в сервис (MAX, Telegram-канал, чат-бот поддержки)
- Кнопка 'Заказать звонок' или 'Быстрое бронирование'
- Глобальный триггер обратной связи или виджета сообщества
Частые архитектурные ошибки
- Использование z-index: 9999, из-за чего пульсирующая кнопка перекрывает модальные окна и мобильные меню
- Анимация масштаба всей кнопки (transform scale в keyframes), приводящая к размытию текста и иконки
- Отсутствие паузы анимации при наведении курсора (hover), что раздражает пользователя при попытке кликнуть