Конструктор пульсирующих кнопок

Настройте все параметры анимации, градиента и эффектов. Сгенерируйте CSS код и используйте на своем сайте!

Настройки кнопки

Основные

Пульсация

Градиент

Эффекты наведения

Имя класса

Текст кнопки

Размер шрифта (px) 22px

Скругление углов (px) 100px

Горизонтальный отступ (px) 35px

Вертикальный отступ (px) 18px

Скорость пульсации

Длительность пульсации (ms) 1000ms

Начальная ширина границы (px) 5px

Конечная ширина границы (px) 3px

Начальный размер тени (px) 0px

Конечный размер тени (px) 10px

Прозрачность границы 0.4

Прозрачность тени 0.7

Задержка пульсации (ms) 0ms

Цвет 1 (0% и 100%)

Цвет 2 (33%)

Цвет 3 (66%)

Скорость смены цвета

Длительность смены цвета (ms) 10000ms

Задержка смены цвета (ms) 0ms

Направление сияния

Длительность сияния (ms) 200ms

Интенсивность сияния 0.4

Масштаб при наведении 1.05

Тень при наведении (px) 15px

Предпросмотр

Наведите курсор на кнопку, чтобы увидеть эффект при наведении

Сгенерированный CSS код

/* Ваш класс для кнопки */
.pulse-btn {
    /* Базовые стили */
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    color: #ffffff;
    cursor: pointer;
    border-radius: 100px;
    padding: 18px 35px;
    border: 0 solid #000;
    
    /* Анимация пульсации */
    animation: borderPulse 1000ms infinite ease-out, 
               colorShift 10000ms infinite ease-in;
}

/* Класс для анимации при наведении */
.pulse-btn-hover {
    animation: colorShift 10000ms infinite ease-in;
}

/* Стили при наведении */
.pulse-btn:hover,
.pulse-btn:focus {
    animation: borderPulse 1000ms infinite ease-out, 
               colorShift 10000ms infinite ease-in, 
               hoverShine 200ms;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Анимация смены цветов */
@keyframes colorShift {
    0%, 100% { background: #0045e6; }
    33% { background: #fb3e3e; }
    66% { background: #0dcc00; }
}

/* Анимация пульсации границы */
@keyframes borderPulse {
    0% {
        box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.4),
                    0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    100% {
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2),
                    0 0 0 10px rgba(255, 255, 255, 0);
    }
}

/* Эффект "сияния" при наведении */
@keyframes hoverShine {
    0% {
        background-image: linear-gradient(135deg, 
                      rgba(255, 255, 255, 0.4) 0%, 
                      rgba(255, 255, 255, 0) 50%, 
                      rgba(255, 255, 255, 0) 100%);
    }
    50% {
        background-image: linear-gradient(135deg, 
                      rgba(255, 255, 255, 0) 0%, 
                      rgba(255, 255, 255, 0.4) 50%, 
                      rgba(255, 255, 255, 0) 100%);
    }
    100% {
        background-image: linear-gradient(135deg, 
                      rgba(255, 255, 255, 0) 0%, 
                      rgba(255, 255, 255, 0) 50%, 
                      rgba(255, 255, 255, 0.4) 100%);
    }
}

Код успешно скопирован в буфер обмена!

Основные преимущества:

Полный контроль над анимацией - настройка скорости, длительности, задержки пульсации

Гибкие параметры градиента - 3 настраиваемых цвета с контролем скорости перехода

Эффекты при наведении - настраиваемое сияние, масштабирование, тень

Параметры пульсации - толщина границы, прозрачность, размер тени

Профессиональный предпросмотр - мгновенное отображение всех изменений

Готовый CSS код - автоматическая генерация с тегами <style>

Как использовать:

Настройте все параметры в панелях управления
Проверьте результат в окне предпросмотра
Нажмите "Копировать код"
Вставьте CSS код на свой сайт
Присвойте элементам класс, указанный в настройках

Надеюсь, этот инструмент поможет создавать потрясающие интерактивные кнопки для ваших проектов! 🚀

Назад

Модификации

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

Для сайта