Генератор кнопок

Этот инструмент создает CSS-кнопку на основе текста, цветов, размеров, границы, эффекта наведения и необязательной box-shadow, с интерактивным живым предпросмотром, на который можно навести курсор. Он выводит класс `.button { ... }` с `transition: all 0.2s ease` и отдельным правилом `.button:hover`, зависящим от выбранного эффекта наведения (затемнить, осветлить, поднять или нет).

1. Введите текст кнопки (по умолчанию Click Me). 2. Выберите цвета фона и текста с помощью палитр или шестнадцатеричных полей ввода. 3. Настройте Размер шрифта (10-32px), Внешний отступ X (8-48px), Внешний отступ Y (4-24px) и Радиус границы (0-50px) ползунками. 4. Установите Цвет границы и Толщину границы (0-5px). 5. Выберите Эффект наведения: затемнить, осветлить, поднять или нет. 6. При необходимости включите Тень и настройте Размытие, Смещение X и Смещение Y. 7. Наведите курсор на предпросмотр, чтобы увидеть эффект; нажмите Копировать на карточке Вывод CSS.

Затемнить/осветли изменяют цвет фона на +/-30 единиц RGB через `adjustBrightness`. Поднять применяет при наведении `transform: translateY(-2px)` и `box-shadow: 0 4px 8px rgba(0,0,0,0.2)`. Нет полностью пропускает правило наведения. Вывод представляет собой одно правило `.button`, содержащее background-color, color, font-size, padding, border-radius, border, cursor, transition и необязательную box-shadow, за которым при необходимости следует блок `.button:hover`. HTML не генерируется.