Руководство по генератору кнопок CSS
Кнопки — самый кликаемый элемент любой страницы: на них держатся все регистрации, покупки и загрузки. Генератор предлагает 6 стилей (градиент, контур, 3D, таблетка, свечение, блеск), каждый с настоящим hover-состоянием, плюс свои цвет, скругление и отступы.
Выберите стиль, настройте цвет и ползунки, скопируйте готовый CSS. Вставьте в блок <style>, добавьте class="btn" кнопке — hover-эффект подключится автоматически.
Pro Tips
- Согласуйте цвет кнопки с акцентным цветом CTA и держите контраст текста не ниже 4.5:1 (WCAG AA).
- Всегда добавляйте видимое hover-состояние — лёгкий подъём или тень подтверждают кликабельность и повышают конверсию.
Frequently Asked Questions
Q: Как добавить кнопку на сайт?
Как добавить кнопку на сайт? Скопируйте сгенерированный CSS в блок <style> и используйте <button class="btn">Текст</button> в HTML.
Q: Почему градиентная кнопка отображается однотонной?
Почему градиентная кнопка отображается однотонной? Градиенту нужны начальный и конечный цвета — проверьте, что оба установлены, и что background не перекрыт другим правилом.
Q: Можно ли изменить hover-эффект?
Можно ли изменить hover-эффект? Да — блок .btn:hover отдельный. Свободно редактируйте или удаляйте строки transform, тени или фона.
Q: Эти кнопки доступны?
Эти кнопки доступны? Да. Используйте читаемый контраст и добавьте :focus-visible { outline: 2px solid; outline-offset: 2px; }, чтобы пользователи клавиатуры видели фокус.
Q: Можно ли использовать в коммерческих проектах?
Можно ли использовать в коммерческих проектах? Конечно — генерируемый CSS оригинален и бесплатен для личных и клиентских работ.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.