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

Как сделать кнопку перехода на сайт?

Юрий, Красноярск 2,6 тыс. просмотров

Хочу поставить на страницу кнопку, чтобы человек по клику попадал на нужный раздел сайта. В конструкторе такой блок не нашёл, а верстать вручную не умею. Можно как-то попроще?

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

ответил

Технически кнопка перехода - это обычная ссылка, оформленная как кнопка: тег a со ссылкой на нужный адрес и стилями фона, отступов и скругления вместо подчёркнутого синего текста. Минимальный код выглядит так: ссылка с классом, а в CSS для этого класса задаются padding около 16-20 пикселей, цвет фона, белый текст и border-radius 6-10 пикселей для скруглённых углов. Если сайт собран в конструкторе, там обычно есть готовый элемент "кнопка" с полем "ссылка при клике" - в 90% случаев не нужно писать код руками.

Дальше важнее оформления. Минимальный размер кнопки - 48 на 48 пикселей, это требование мобильного UX: пальцем в меньшую кнопку легко промахнуться. На мобильном высота 54-64 пикселя, на десктопе 48-60 достаточно.

Три правила, которые чаще всего нарушают:

  • Текст кнопки одинаковый на всей странице. Если наверху "Отправить заявку", а внизу "Узнать цену", восприятие размывается, будто это разные действия.
  • Цвет кнопки не должен совпадать с цветом логотипа или других акцентных элементов - иначе она сливается с фоном и перестаёт бросаться в глаза.
  • Кнопка повторяется через каждые один-два экрана, а не стоит только вверху страницы. Человек редко нажимает при первом знакомстве с текстом, но легко нажмёт, дочитав до нужного аргумента.

Если на лендинге несколько равнозначных способов связи - звонок, Telegram, мессенджер - показывайте 2-3 кнопки одинакового размера, можно разного цвета под каждый канал. Не делайте одну кнопку главной, а вторую мелкой: это заставляет посетителя выбирать и снижает общее число кликов, а не увеличивает.

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

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

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

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

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

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

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

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

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

Telegram TG MAX MAX Звонок