Мульти кнопка для сайта с помощью кода HTML, JS и CS

В этом уроке мы разберем, как сделать мульти кнопку для сайта с помощью HTML, JS и CSS. При нажатии на кнопку будут появляться всплывающие кнопки с ссылками на чаты в WhatsApp и Telegram, а также кнопка позвонить по телефону. Поняв принцип вы сможете добавлять любое количество всплывающих кнопок с нужными вам контактами.

Также мы рассмотрим готовый плагин с кнопкой для WordPress.

HTML код кнопки

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

<div class="fixed-button">
    <button id="main-button">
        <!-- Иконка для главной кнопки -->
        <img src="/путь к файлу/main-icon.svg" alt="Menu">
    </button>
    <div class="popup">
        <!-- Ссылки и иконки для всплывающих кнопок -->
        <a href="tel:1234567890" class="popup-button">
            <img src="/путь к файлу/tel.svg" alt="Телефон" title="Позвонить">
        </a>
        <a href="https://wa.me/1234567890" class="popup-button">
            <img src="/путь к файлу/whatsapp.svg" alt="WhatsApp" title="Написать в WhatsApp">
        </a>
        <a href="https://t.me/username" class="popup-button">
            <img src="/путь к файлу/telegram.svg" alt="Telegram" title="Написать в Telegram">
        </a>
    </div>
</div>

В коде мы использовали svg иконки, которые нужно предварительно загрузить на хостинг, в папку с вашим сайтом. Затем в коде прописать путь к месту расположения файлов.

Итак, мы загрузили иконки, прописали код главной кнопки и трёх всплывающих кнопок с нужными нам контактами.

CSS стиль кнопки

Теперь нам нужно всё это дело красиво оформить, например следующим образом.

.fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
}

#main-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: #007BFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#main-button img {
    width: 30px;
    height: 30px;
}

.popup {
    display: none;
    position: absolute;
    bottom: 70px;
    right: 0;
    flex-direction: column;
    align-items: center;
}

.popup-button {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 50%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.popup-button img {
    width: 25px;
    height: 25px;
}

.popup-button:hover {
    transform: scale(1.1);
}

Также, с помощью CSS, кнопке можно добавить красивую анимацию и всякие всплывающие подсказки.

Скрипт для кнопки

Теперь пропишем скрипт, чтобы у кнопки появилась функция отображения скрытых всплывающих кнопок.

document.addEventListener('DOMContentLoaded', function () {
    const mainButton = document.getElementById('main-button');
    const popup = document.querySelector('.popup');

    mainButton.addEventListener('click', function () {
        popup.style.display = popup.style.display === 'flex' ? 'none' : 'flex';
    });

    document.addEventListener('click', function (event) {
        if (!mainButton.contains(event.target) && !popup.contains(event.target)) {
            popup.style.display = 'none';
        }
    });
});

Если вы планируете добавить этот скрипт напрямую в тело или подвал страницы, то необходимо обернуть его в теги <script>...</script>.

Если же вы хотите подключить его как отдельный файл, то создайте файл script.js и поместите туда код. Далее этот файл нужно будет подключить к вашему сайту. В WordPress это можно сделать через functions.php, либо опять же прописать на странице.

<script src="...путь к файлу/script.js"></script>

Установка кнопки на HTML сайт

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мульти кнопка</title>
</head>
<body>

<div class="fixed-button">
    <button id="main-button">
        <!-- Иконка для главной кнопки -->
        <img src="/путь к файлу/main-icon.svg" alt="Menu">
    </button>
    <div class="popup">
        <!-- Ссылки и иконки для всплывающих кнопок -->
        <a href="tel:1234567890" class="popup-button">
            <img src="/путь к файлу/tel.svg" alt="Телефон" title="Позвонить">
        </a>
        <a href="https://wa.me/1234567890" class="popup-button">
            <img src="/путь к файлу/whatsapp.svg" alt="WhatsApp" title="Написать в WhatsApp">
        </a>
        <a href="https://t.me/username" class="popup-button">
            <img src="/путь к файлу/telegram.svg" alt="Telegram" title="Написать в Telegram">
        </a>
    </div>
</div>

<style>

.fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
}

#main-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: #007BFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#main-button img {
    width: 30px;
    height: 30px;
}

.popup {
    display: none;
    position: absolute;
    bottom: 70px;
    right: 0;
    flex-direction: column;
    align-items: center;
}

.popup-button {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 50%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.popup-button img {
    width: 25px;
    height: 25px;
}

.popup-button:hover {
    transform: scale(1.1);
}

</style>
<script>

document.addEventListener('DOMContentLoaded', function () {
    const mainButton = document.getElementById('main-button');
    const popup = document.querySelector('.popup');

    mainButton.addEventListener('click', function () {
        popup.style.display = popup.style.display === 'flex' ? 'none' : 'flex';
    });

    document.addEventListener('click', function (event) {
        if (!mainButton.contains(event.target) && !popup.contains(event.target)) {
            popup.style.display = 'none';
        }
    });
});

</script>
</body>
</html>

Если подключать отдельно файл стилей и скрипт, то код будет следующим.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мульти кнопка</title>
    <link rel="stylesheet" href="/путь к файлу/styles.css">
</head>
<body>

<div class="fixed-button">
    <button id="main-button">
        <!-- Иконка для главной кнопки -->
        <img src="/путь к файлу/main-icon.svg" alt="Menu">
    </button>
    <div class="popup">
        <!-- Ссылки и иконки для всплывающих кнопок -->
        <a href="tel:1234567890" class="popup-button">
            <img src="/путь к файлу/tel.svg" alt="Телефон" title="Позвонить">
        </a>
        <a href="https://wa.me/1234567890" class="popup-button">
            <img src="/путь к файлу/whatsapp.svg" alt="WhatsApp" title="Написать в WhatsApp">
        </a>
        <a href="https://t.me/username" class="popup-button">
            <img src="/путь к файлу/telegram.svg" alt="Telegram" title="Написать в Telegram">
        </a>
    </div>
</div>

<script src="/путь к файлу/script.js"></script>
</body>
</html>

Установка кнопки на WordPress

Подключение на WordPress сайте происходит аналогично. Расписывать куда вставлять HTML и CSS код не буду, об этом есть много информации, в том числе и на нашем сайте.

Единственное, если вы будете подключать файл со скриптом через functions.php, то код будет следующим.

add_action( 'wp_enqueue_scripts', 'my_script_1' );
function my_script_1(){
	wp_enqueue_script( 'popupscript', get_template_directory_uri() . '/путь к файлу/script.js');
}

Готовый WordPress плагин мульти кнопки

Тем, кому сложно разбираться с кодом предлагаю свой готовый плагин для WordPress, где кнопку можно легко настроить под ваш стиль сайта. У кнопки есть красивая анимация, всплывающие подсказки и возможность настройки внешнего вида. Плагин платный, но не дорогой.

Ссылка на плагин Multibutton Fixed

Мульти кнопка для сайта