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

Генератор CSS-кнопок: для чего нужен

Выберите готовый стиль (сплошной, таблетка, контур, градиент или квадрат) и настройте текст, цвета, размер шрифта, отступы, углы, тень, насыщенность шрифта и эффект при наведении (подъём, затемнение или увеличение). Предпросмотр работает по-настоящему: наведите мышь и нажмите.

CSS включает видимый фокус для клавиатуры, эффект наведения только на устройствах с мышью и лёгкое уменьшение при нажатии. Инструмент показывает контраст между текстом и фоном и предупреждает, когда он ниже 4,5:1.

Как пользоваться

1. Выберите готовый стиль.
2. Настройте цвета, размер, углы, тень и эффект.
3. Проверьте контраст и скопируйте CSS и HTML.

Когда использовать

• Кнопки призыва к действию на лендингах.
• Единый стиль кнопок сайта.
• Изучение CSS на наглядном результате.

Частые вопросы

Доступна ли кнопка?

Код использует тег button (или a), сохраняет видимый контур фокуса через :focus-visible, а инструмент предупреждает, когда контраст текста и фона ниже 4,5:1, минимума WCAG для обычного текста.

Почему эффект наведения виден только на компьютере?

Наведение находится внутри @media (hover: hover), потому что на телефоне касание вызывает ложное наведение, которое застревает на кнопке. Эффект нажатия (:active) работает на всех устройствах.

Можно ли использовать код для ссылки?

Да. Замените <button> на <a href="..."> и оставьте класс; CSS уже включает display:inline-flex и text-decoration:none для обоих случаев.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты