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

Как сделать адаптивную кнопку?

Ирина, Челябинск 1,8 тыс. просмотров

Заказала лендинг у фрилансера, на компьютере кнопка "Записаться" смотрится нормально, а на телефоне съезжает и почти не видна. Как правильно сделать, чтобы кнопка сама подстраивалась под экран?

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

ответил

Адаптивная кнопка меняет размер и расположение под ширину экрана, а не остаётся одного пикселя на все случаи. Три правила: высота от 44-48 пикселей на любом устройстве, ширина через проценты или max-width вместо жёсткого числа в px, и отдельные точки перелома в CSS для мобильного, планшета и десктопа. Без этого кнопка либо теряется на маленьком экране, либо растягивается на большом до нелепой ленты через весь блок.

Конкретные цифры, которые обычно ставлю в вёрстке: высота 54-64 пикселя на мобильном, 48-60 на десктопе, ширина от 200 пикселей для короткого текста до 340 для длинного, отступы внутри кнопки 16 пикселей по бокам и 12-16 сверху и снизу. Скругление углов 6-12 пикселей: больше превращает кнопку в пилюлю, меньше делает угловатой.

В CSS это решается через media query на границе примерно 768 пикселей плюс функцию clamp() для padding и размера шрифта, чтобы кнопка плавно менялась между точками перелома, а не прыгала. Отдельно проверьте кнопку при увеличенном системном шрифте: часть посетителей ставит масштаб 125% и больше, и жёстко заданная ширина в px в этом случае обрезает текст или ломает строку.

Если лендинг уже собран у другого исполнителя, это правка на 15-20 минут в CSS, а не переделка макета. Разработчик, который делал сайт, обязан её сделать бесплатно, если гарантийная поддержка вообще была прописана в договоре.

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

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

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

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

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

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

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

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

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

Telegram TG MAX MAX Звонок