Мультикнопки для сайта: готовые решения и самостоятельное создание

Что такое мульти-кнопка?

Мульти-кнопка — это кнопка, которая при клике или наведении раскрывает дополнительные действия. Она состоит из центральной кнопки и нескольких вспомогательных кнопок, которые могут располагаться вокруг нее или в определенной последовательности.
Пример использования мульти-кнопки:

• Кнопка с быстрыми действиями: «Позвонить», «Написать», «Оставить отзыв» и т.п..
• Социальные ссылки: переходы на Vk, ok и т.д..
• Интерактивное меню: переходы на разные разделы сайта.

Готовые решения

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

Envybox

Envybox предлагает виджет мультикнопки с возможностью настройки дизайна и функциональности. Установка занимает около 3 минут и не требует специальных навыков.

Стоимость от 840₽ /месяц.

Авиджет

Awidget позволяет разместить ссылки для быстрого перехода на любые страницы вашего или стороннего сайта. Установка и настройка занимают 3-5 минут. Стоимость от 510₽ /месяц.

Чатим

Чатим предоставляет мультикнопку с возможностью настройки дизайна, расположения и содержимого кнопок, позволяя клиентам выбрать удобный способ связи. Есть бесплатная урезанная версия, платная версия от 19$/месяц.

Самостоятельное создание мультикнопки

Давайте сделаем мультикнопку похожую на готовое решение от Envybox или Авиджет. Для создания нам понадобятся:

1. HTML для структуры кнопки.
2. CSS для стилизации и анимации.
3. JavaScript для интерактивности (опционально).
4. Библиотека иконок — возьмем к примеру font awesome (опционально — можно заменить на изображения, SVG спрайты и т.д.)

HTML-разметка

Подключаем иконки от font awesome (желательно в секции head):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Далее создаем базовую структуру мульти-кнопки. Центральная кнопка будет содержать основное действие, а дополнительные кнопки — вспомогательные.

<div class="multi-button">
        <div class="main-button">
            <i class="fa-regular fa-comments"></i> <!-- Главная кнопка -->
        </div>
        <div class="sub-buttons">
            <a href="https://wa.me/1234567890" target="_blank" class="sub-button whatsapp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="https://t.me/username" target="_blank" class="sub-button telegram">
                <i class="fab fa-telegram-plane"></i>
            </a>
            <a href="tel:+1234567890" class="sub-button phone">
                <i class="fas fa-phone"></i>
            </a>
        </div>
</div>

Соответственно вы можете добавить практически любое количество кнопок.

Объяснение структуры:

• main-button — центральная кнопка, которая активирует дополнительные.
• sub-buttons — контейнер для вспомогательных кнопок.
• sub-button — вспомогательные кнопки с разными действиями.

CSS для стилизации

Добавим стили, чтобы кнопки выглядели эстетично и анимировались при взаимодействии.

/* Задаем цвета, которые будем использовать */
:root {
  --green: #4caf50;
  --greenwc: #1B8755;
  --bluetg: #259CD8;
  --white: #fff;
  --light: #f8f9fa;
  --dark: #343a40;
}
/* Стили мультикнопок */
.multi-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 777;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  border: 2px solid transparent; /* Прозрачная граница */
  font-size: 1.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background .3s ease-in-out, border .3s ease-in-out; /* Плавный переход для фона и границы */
  animation: hoverWave 1s linear infinite; /* Анимация волны */
}
/* Анимация волны */
@keyframes hoverWave{0%,100%{box-shadow:0 8px 10px rgba(2,88,35,0.644),0 0 0 0 rgba(4,212,32,0.2)}
40%{box-shadow:0 8px 10px rgba(49,199,11,0.3),0 0 0 15px rgba(2,97,14,0.2)}
80%{box-shadow:0 8px 10px rgba(20,122,7,0.3),0 0 0 30px rgba(13,78,32,0)}
}
.main-button i {
  animation: shake 1.2s ease infinite; /* Анимация тряски */
}
/* Анимация тряски */
@keyframes shake{0%,100%{transform:rotateZ(0deg)}
10%{transform:rotateZ(-30deg)}
20%{transform:rotateZ(15deg)}
30%{transform:rotateZ(-10deg)}
40%{transform:rotateZ(7.5deg)}
50%{transform:rotateZ(-6deg)}
60%{transform:rotateZ(5deg)}
70%{transform:rotateZ(-4.3deg)}
80%{transform:rotateZ(3.75deg)}
90%{transform:rotateZ(-3.33deg)}
}
.main-button:hover {
  transform: scale(1.1);
}
/* Отключаем анимации при появлении кнопок */
.multi-button.noanimate, .multi-button.noanimate .main-button i{
  animation: none
}
.sub-buttons {
  position: absolute;
  display: none; /* Скрываем кнопки по умолчанию */
  bottom: 70px;
  right: 0;
  flex-direction: column;
  align-items: center;
}
.sub-button {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 50%;
  background-color: var(--light);
  color: var(--dark);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.sub-button:hover {
  transform: scale(1.1);
}
/* Раскрашиваем иконки (опционально) */
.sub-button.whatsapp {
  color: var(--greenwc);
}
.sub-button.telegram {
  color: var(--bluetg);
}
/* Оформление всплывающих подсказок */
.sub-button .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: var(--dark);
  font-size: 1rem;
  color: var(--white);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}
/* Показывать текст подсказки при наведении курсора на контейнер подсказки */
.sub-button:hover .tooltiptext {
  visibility: visible;
}
.sub-button .tooltiptext {
  top: 1rem;
  right: 110%;
}
/* Добавляем хвостик */
.sub-button .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; 
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent var(--dark);
}

JavaScript для интерактивности

Чтобы кнопки появлялись при нажатии, добавим немного JavaScript.

document.querySelector('.main-button').addEventListener('click', () => {
  const multiButton = document.querySelector('.multi-button'); // Получаем ссылку на multi-button
  const subButtons = document.querySelector('.sub-buttons');

  if (subButtons.style.display === 'none' || !subButtons.style.display) {
    subButtons.style.display = 'flex';
    multiButton.classList.add('noanimate'); // Добавляем класс к multi-button
  } else {
    subButtons.style.display = 'none';
    multiButton.classList.remove('noanimate'); // Удаляем класс к multi-button (если нужно)
  }
});

Вот как будет выглядеть конечный результат:

Заключение

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