Как создать HTML-кнопку
Настройте параметры кнопки с помощью полей выше — превью обновляется в реальном времени. Когда достигнете нужного результата, нажмите «Копировать код» и вставьте HTML в ваш сайт или шаблон.
Когда использовать кнопку-ссылку vs тег button
- <button> — для действий внутри страницы (отправка формы, открытие модала, JS-действие). Не используйте для навигации.
- <a> как кнопка — для навигации на другую страницу. Семантически правильно и хорошо для SEO.
Генератор создаёт оба варианта в зависимости от того указали ли вы ссылку в поле href.
Часто задаваемые вопросы
Как добавить эффект при наведении на кнопку?
Inline CSS не поддерживает :hover. Добавьте CSS-класс кнопке и пропишите стили отдельно: .btn:hover { opacity: 0.9; transform: translateY(-1px); transition: all .2s; }. Или используйте CSS-в-JS (styled-components для React). Простой вариант через атрибут onmouseover/onmouseout — но это не лучшая практика для продакшена.
Как правильно выбрать цвет кнопки CTA?
Кнопка призыва к действию (CTA) должна: 1) Контрастировать с фоном страницы. 2) Отличаться от других элементов. Популярные цвета CTA: оранжевый (#f97316) — агрессивно и заметно, зелёный (#22c55e) — доверие и «вперёд», синий (#2563eb) — доверие и надёжность. A/B тестирование цвета кнопки — один из самых быстрых способов поднять конверсию.
Влияет ли текст кнопки на конверсию?
Значительно. «Купить» хуже чем «Купить за 990 ₽», «Скачать» хуже чем «Скачать бесплатно», «Отправить» хуже чем «Получить консультацию». Правило: используйте глагол + выгоду или снятие страха. Исследования показывают что изменение текста кнопки меняет конверсию на 10–90%.
Как сделать кнопку адаптивной на мобильных?
Добавьте в CSS: display:block или width:100% для мобильных через медиа-запрос: @media(max-width:640px){.your-btn{width:100%;text-align:center;}}. Минимальный размер области касания для мобильных — 44×44px (рекомендация Apple и Google). Увеличьте padding чтобы кнопка была достаточно большой для нажатия пальцем.
