Генератор кнопок CSS
Создайте стилизованные кнопки с кодом CSS
Заголовок
Описание
.click-me {
padding: 12px 18px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
border: none;
background-color: #3B82F6;
color: #FFFFFF;
cursor: pointer;
}
.click-me:hover {
background-color: #2563EB;
}Создавайте собственные кнопки с использованием стилей CSS с помощью нашего генератора кнопок. Создавайте стилизованные кнопки с цветами, размерами, границами и эффектами наведения для своих веб-проектов.
Основные функции
Настраиваемый текст и стиль кнопок
Палитра цветов фона и текста
Регулируемые отступы, размер шрифта и радиус границы
Варианты толщины и стиля шрифта
Оформление границ (нет, сплошная, пунктирная, пунктирная)
Выбор цвета эффекта при наведении
Генератор кнопок
Введите текст кнопки
Введите текст метки, который должен отображаться на кнопке
Настроить цвета
Используйте палитры цветов для установки цветов фона, текста и при наведении
Отрегулировать размеры
Установите отступы, размер шрифта и радиус границы для изменения размера.
Добавить стиль
Выберите толщину шрифта и, если хотите, стиль рамки
Копировать CSS
Нажмите «Копировать», чтобы получить CSS-код для вашей стилизованной кнопки.
Сценарии использования
Создание кнопок призыва к действию для целевых страниц
Разработка единообразных стилей кнопок для веб-приложений
Создание состояний при наведении кнопки для интерактивной обратной связи
Прототипирование компонентов пользовательского интерфейса для систем дизайна
Часто задаваемые вопросы
Могу ли я создавать разные состояния кнопок?
Да, генератор автоматически создает CSS как для обычного состояния, так и для состояния при наведении.
Какие классы CSS генерируются?
Инструмент генерирует семантические имена классов на основе текста вашей кнопки
Могу ли я настроить стили границ?
Да, выберите отсутствие, сплошную, пунктирную, пунктирную или двойную границу с произвольной шириной
Готов ли код к производству?
Да, весь сгенерированный CSS оптимизирован и готов к использованию в производстве.
Tool Information
Related Tools You Might Like
Генератор цветовой палитры от Image
Извлечение доминирующих цветов из изображения
Конвертер RGB/HEX
Преобразование цветовых форматов RGB и HEX
Градиентный генератор CSS
Создание пользовательских градиентов CSS с предварительным просмотром
Контрастная проверка WCAG
Проверка цветового контраста по стандартам WCAG
Генератор цифровой подписи
Создание стилизованных цифровых подписей с различными шрифтами
Генератор теней Box
Создание теней CSS Box
Калькулятор объемов Surfboard
Рассчитайте идеальный объем доски для серфинга на основе вашего веса, уровня опыта и волновых условий.
Конвертер высоты волны
Преобразование между различными измерениями высоты волны (высота лица, гавайская шкала, набухание океана).
Разработчик Scuba Dive Planner
Планируйте погружение с аквалангом с ограничениями глубины, нижним временем и требованиями к декомпрессии безопасности.