Как пользоваться: Генератор CSS-кнопок
- Начните с пресета: сплошной, контурной, прозрачной, pill, градиентной, 3D, стеклянной или neo-brutalist.
- Измените цвета (или градиент), размер шрифта, отступы, скругление углов, границу и тень.
- Выберите эффект при наведении и проверьте каждое состояние в предпросмотре: наведение, нажатие и клавиша Tab для кольца фокуса.
- Скопируйте CSS и HTML; при желании переименуйте класс
.btn.
Все состояния доступны по умолчанию
- Hover даёт понятную визуальную реакцию с коротким
transition. - Active (нажатое состояние) немного опускает кнопку, поэтому клики ощущаются физически.
- Focus-visible показывает заметный контур только для пользователей клавиатуры: мышь не получает лишних рамок, а те, кто навигирует с помощью Tab, всегда видят фокус.
prefers-reduced-motionотключает движение для посетителей, которые просят меньше анимаций.
Проверьте текст на контраст с цветом кнопки в Contrast Checker — WCAG требует не менее 4.5:1 для обычного текста. Для действий используйте настоящий <button>, для навигации — <a>; CSS работает с обоими элементами. Похожие инструменты: Box Shadow Generator, CSS Gradient Generator, CSS Hover Animation Generator.
Также ищут как: css button generator, стили кнопки webflow.
Инструменты, которые хорошо сочетаются с Генератор CSS-кнопок
- CSS-кнопки — Выберите одну из 24 анимированных CSS-кнопок: с заливкой, рамками, свечением, бликами и объёмным нажатием.
- Иконки бургер-меню — Выберите одну из 16 анимированных кнопок-бургеров, которые превращаются в крестик, стрелку или минус.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
Часто задаваемые вопросы
Как сделать эффект наведения для кнопки в CSS?
Добавьте правило :hover, которое меняет фон, тень или положение, и transition для кнопки, чтобы изменение анимировалось. Выберите эффект наведения здесь, и вы получите код.
Нужно ли убирать контур фокуса у кнопок?
Нет — он нужен пользователям клавиатуры. Используйте :focus-visible, как в этом генераторе: кольцо появляется при навигации с клавиатуры, но не после кликов мышью.
Как сделать градиентную кнопку?
Отметьте «Градиентный фон» и выберите два цвета; CSS использует linear-gradient как background-image.
Работает ли это в Webflow?
Да — вставьте CSS в Embed с тегом style (или в пользовательский код сайта) и назначьте кнопке Webflow класс btn либо перенесите значения в панель Style.
Можно ли установить Генератор CSS-кнопок как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS-кнопок — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.