? Анимированная круглая кнопка обратного звонка на CSS

Содержание

Создание простой круглой кнопки
1. Основы HTML и CSS
2. Создание HTML-разметки
3. Базовая стилизация кнопки
4. Добавление анимации
5. Добавление дополнительных эффектов (опционально)
Результат
Делаем более крутую кнопку (обратного звонка) CSS с анимацией
Шаг 1: Структура HTML
Шаг 2: Стилизация CSS
Объяснение кода и результат
Делаем кнопку обратной связи
Заключение

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

Создание простой круглой кнопки

1. Основы HTML и CSS

Для создания кнопки нам понадобятся минимальные знания HTML и CSS. Мы будем использовать HTML для разметки кнопки, а CSS для её стилизации и анимации. Основные CSS-свойства, которые нам пригодятся:

border-radius — чтобы сделать кнопку круглой;
transform и transition — для добавления анимации;
box-shadow — чтобы добавить тень.

2. Создание HTML-разметки

Для начала создадим простую разметку. Мы будем использовать тег <a>, чтобы при клике по кнопке набирался телефонный номер (на мобилках).

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Круглая кнопка обратного звонка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="tel:+1234567890" class="call-button">?</a>
</body>
</html>

В этом коде:

Используется тег <a> с атрибутом href, который ссылается на телефонный номер. Это позволяет сделать кнопку активной.
Класс call-button будет использоваться для стилизации кнопки в CSS.

3. Базовая стилизация кнопки

Теперь перейдём к CSS и стилизуем кнопку. Добавим файл style.css и опишем основные стили.

/* Основные стили */
.call-button {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #28a745;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

Здесь:

width и height задают размер кнопки (60×60 пикселей).
background-color — зелёный фон кнопки.
color — белый цвет текста (иконки).
border-radius: 50% делает кнопку круглой.
position: fixed фиксирует кнопку в правом нижнем углу.
box-shadow добавляет тень, чтобы кнопка выглядела объёмной.
transition позволяет плавно изменять свойства при наведении.

4. Добавление анимации

Теперь добавим анимацию, чтобы кнопка реагировала на наведение курсора. Сделаем её чуть больше и изменим тень.

/* Анимация при наведении */
.call-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

С помощью transform: scale(1.1) мы увеличиваем размер кнопки на 10% при наведении. Новое значение box-shadow делает тень более интенсивной.

5. Добавление дополнительных эффектов (опционально)

Для улучшения визуального стиля можно добавить эффект «пульсации», когда кнопка будет «пульсировать» с небольшим увеличением.

/* Эффект пульсации */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.call-button {
    animation: pulse 2s infinite;
}

Этот код создает анимацию, которая повторяется каждые 2 секунды. Кнопка будет плавно увеличиваться и уменьшаться, привлекая внимание.

Результат

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

Делаем более крутую кнопку (обратного звонка) CSS с анимацией

Шаг 1: Структура HTML

Начнем с создания HTML-разметки для нашей кнопки. Мы добавим кнопку с иконкой и текстом, который будет отображаться при наведении.

<div class="call-btn" aria-label="Заказ звонка">
    <div class="img-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="51" height="51" fill="white">
            <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/>
        </svg>
    </div>
    <div class="text-btn">
        <span>Заказать<br>звонок</span>
    </div>
</div>

Шаг 2: Стилизация CSS

Теперь добавим стили для нашей кнопки, чтобы она выглядела привлекательно и имела анимацию.

/* Основной стиль кнопки */
.call-btn {
    background: #38a3fd; /* Синий фон */
    border-radius: 50%; /* Круглая форма */
    box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3); /* Тень для кнопки */
    cursor: pointer; /* Курсор в виде руки при наведении */
    border: 2px solid transparent; /* Прозрачная граница */
    display: flex; /* Используем flexbox для центрирования содержимого */
    align-items: center; /* Вертикальное центрирование содержимого */
    justify-content: center; /* Горизонтальное центрирование содержимого */
    height: 75px; /* Высота кнопки */
    width: 75px; /* Ширина кнопки */
    position: fixed; /* Фиксированное положение на экране */
    right: 8%; /* Отступ от правого края */
    bottom: 18%; /* Отступ от нижнего края */
    z-index: 999; /* Высокий z-index для отображения поверх других элементов */
    transition: background .3s ease-in-out, border .3s ease-in-out; /* Плавный переход для фона и границы */
    animation: hoverWave 1s linear infinite; /* Анимация волны */
}

/* Изменение стиля при наведении */
.call-btn:hover {
    background: #fff; /* Белый фон при наведении */
    border: 2px solid #38a3fd; /* Синяя граница при наведении */
}

/* Стиль для контейнера с иконкой */
.call-btn .img-btn {
    display: flex; /* Используем flexbox для центрирования содержимого */
    align-items: center; /* Вертикальное центрирование содержимого */
    justify-content: center; /* Горизонтальное центрирование содержимого */
    height: 100%; /* Высота контейнера */
    width: 100%; /* Ширина контейнера */
    transition: opacity .3s ease-in-out; /* Плавный переход для прозрачности */
    animation: shake 1.2s ease infinite; /* Анимация тряски */
}

/* Изменение прозрачности иконки при наведении */
.call-btn:hover .img-btn {
    opacity: 0; /* Иконка становится прозрачной при наведении */
}

/* Стиль для контейнера с текстом */
.call-btn .text-btn {
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Верхний отступ */
    left: 0; /* Левый отступ */
    height: 100%; /* Высота контейнера */
    width: 100%; /* Ширина контейнера */
    display: flex; /* Используем flexbox для центрирования содержимого */
    align-items: center; /* Вертикальное центрирование содержимого */
    justify-content: center; /* Горизонтальное центрирование содержимого */
}

/* Стиль для текста */
.call-btn .text-btn span {
    color: #38a3fd; /* Синий цвет текста */
    font-size: 11px; /* Размер шрифта */
    font-weight: 600; /* Толщина шрифта */
    text-transform: uppercase; /* Преобразование текста в верхний регистр */
    text-align: center; /* Центрирование текста */
    opacity: 0; /* Текст невидим по умолчанию */
    transition: opacity .3s ease-in-out; /* Плавный переход для прозрачности */
}

/* Изменение прозрачности текста при наведении */
.call-btn:hover .text-btn span {
    opacity: 1; /* Текст становится видимым при наведении */
}

/* Анимация волны */
@keyframes hoverWave {
    0%, 100% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0);
    }
}

/* Анимация тряски */
@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);
    }
}

Объяснение кода и результат

HTML: Мы создали контейнер для кнопки с двумя вложенными элементами: img-btn для иконки и text-btn для текста, который будет отображаться при наведении.
CSS:
- Основные стили: Кнопка имеет круглый фон, тень и плавные переходы для изменения фона и границы при наведении.
- Анимация: Кнопка имеет две анимации: hoverWave для эффекта волны и shake для иконки.
- Переходы: При наведении иконка исчезает, а текст появляется.

Делаем кнопку обратной связи

За основы уберем все тот же выше приведенный код. Давайте к примеру заменим картинки, цвет кнопки и анимации.

Возьмем иконку Font Awesome под названием envelope. Нам нужен svg код:

Выглядит он вот так:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>

Почистим его от комментариев, зададим размеры (width и height) иконке и сделаем ее белой (fill):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="51" height="51" fill="white">
	<path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/>
</svg>

В конечном итоге получаем вот такой HTML:

<div class="call-btn obr-svyaz" aria-label="Обратная связь">
    <div class="img-btn">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="51" height="51" fill="white">
			<path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/>
		</svg>
    </div>
    <div class="text-btn">
        <span>Обратная<br>связь</span>
    </div>
</div>

Здесь я добавил доп класс obr-svyaz, чтобы можно было предопределить стили.

Ну и предопределяем некоторые CSS стили:

.call-btn.obr-svyaz {
    background: #F95C18;
    box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3);
    right: auto;
    left: 8%;
    bottom: 18%;
	-webkit-animation: email-an linear 1s infinite;
    animation: email-an linear 1s infinite;
}

.call-btn.obr-svyaz:hover {
    border: 2px solid #F95C18;
}	
.call-btn.obr-svyaz .text-btn span {
	color: #fff;		
}
@keyframes email-an {
    0% {
        box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 0 rgba(249, 92, 24, 0.2), 0 0 0 0 rgba(249, 92, 24, 0.2)
    }

    40% {
        box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 15px rgba(249, 92, 24, 0.2), 0 0 0 0 rgba(249, 92, 24, 0.2)
    }

    80% {
        box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 30px rgba(249, 92, 24, 0), 0 0 0 26.7px rgba(249, 92, 24, 0.067)
    }

    100% {
        box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 30px rgba(249, 92, 24, 0), 0 0 0 40px rgba(249, 92, 24, 0.0)
    }
}

Заключение

Теперь вы знаете, как создать круглую кнопку обратного звонка или обратной связи с анимацией. Это поможет сделать ваш сайт более интерактивным и удобным для пользователей. Можно добавить и другие эффекты, такие как анимация при клике или изменение цвета.

< MODX + WebP: оптимизация изображений для ускорения сайта

Как сделать ссылку на WhatsApp: подробное руководство >