Дизайн и конверсия

Как сделать кнопки на сайте HTML?

Роман, Томск 971 просмотров

Верстаю сайт для своей мастерской по ремонту обуви сам, дошёл до кнопки "Оставить заявку". В интернете куча разных вариантов кода для кнопок, не понимаю, какой правильный и на что вообще смотреть при её разработке, кроме цвета.

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

Кнопка - это тег button или ссылка a с классом, отдельного HTML-тега "кнопка" не существует. Минимальный рабочий вариант: ссылка на якорь формы с классом btn плюс CSS с фоном, отступами и радиусом скругления. Технически любой вариант работает - разница в том, что реально доводит человека до клика.

Кроме цвета важны три вещи: контраст с фоном (кнопка должна читаться и на телефоне под ярким солнцем), размер не меньше 44 на 44 пикселя - это минимальная область, по которой палец на телефоне попадает без промаха, и текст с конкретным действием: "Оставить заявку" или "Записаться" вместо обезличенного "Отправить".

На одной странице держите один основной призыв, повторённый одинаковым текстом и цветом в нескольких местах, а не три разные кнопки вроде "Купить", "Узнать больше" и "Написать" - они спорят за внимание и снижают общий процент кликов, потому что человек не понимает, какая из них главная.

Технически: используйте a href, если кнопка ведёт на другой раздел или прокручивает страницу к форме, и button type submit, если это реальная отправка формы. Div с обработчиком клика вместо этих тегов - плохая идея: такая "кнопка" не работает с клавиатуры и хуже распознаётся мобильными браузерами и скринридерами.

Подробный разбор CTA-кнопка на лендинге: текст, цвет, размер, расположение
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок