Коротко: размер кнопки задают отступами и шрифтом, а не только width/height. Так кнопка остаётся удобной и не «ломается» при длинном тексте.
Кому и зачемНужно, когда кнопка выглядит «мелкой», «дёргается» при разном тексте или неудобна на телефоне. Покажем устойчивые приёмы и минимум для нажатия.
Три подхода
CSS
.btn { padding: 12px 28px; font-size: 16px; }Самый устойчивый способ: кнопка «растёт» вместе с текстом.
CSS
.btn {
width: 220px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
}Подходит для кнопок фиксированного размера. Длинный текст придётся ограничить.
CSS
.btn { min-height: 44px; min-width: 44px; }44×44 px — рекомендуемая зона нажатия на сенсорных экранах.
Практика: три задачи
1. Кнопка на всю ширину на мобильном
- Задайте
width: 100%для телефонов. - Ограничьте
max-widthна десктопе.
CSS
.btn { width: 100%; max-width: 360px; }
@media (min-width: 600px) { .btn { width: auto; } }2. Большая и маленькая кнопки
CSS
.btn--s { padding: 8px 16px; font-size: 14px; }
.btn--l { padding: 16px 32px; font-size: 18px; }3. Одинаковая высота кнопок в ряду
CSS
.row { display: flex; gap: 12px; align-items: stretch; }
.row .btn { display: inline-flex; align-items: center; }Частая причина «дёрганья»Фиксированная ширина под короткий текст. Используйте
padding или min-width — кнопка перестанет «прыгать».Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кнопка «дёргается» | фикс-ширина | padding/min-width |
| Неудобно нажимать | малая высота | min-height: 44px |
| Текст обрезается | жёсткие размеры | убрать width, добавить padding |
| Кнопка растянулась на всю ширину на ПК | width:100% без max |
добавить max-width |
Проверьте себя
Чек-лист
Какой минимальный размер кнопки удобен для нажатия пальцем?
Вопросы и ответы
Разный текст и фиксированная ширина. Используйте padding и min-width для ровного вида.
display: inline-flex; align-items:center; justify-content:center.
Для отступов кнопки — rem/em, чтобы размеры масштабировались и оставались удобными.
Flex с gap, иконка — SVG с fill: currentColor, чтобы цвет наследовался.
Итоги
- Размер —
padding+font-size. - Фикс-размер — flex-центрирование.
- Минимум для нажатия — 44px.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.