Коротко: адаптивная кнопка — это кнопка, которая одинаково удобна на телефоне и на большом экране. Приёмы: width: 100% на мобильных и auto на десктопе, отступы через clamp(), перенос текста, минимальная высота и достаточная зона нажатия.
Что делает кнопку адаптивной
| Проблема | Решение |
|---|---|
| Не влезает по ширине | max-width: 100% |
| Слишком узкая на мобильном | width: 100% в медиа-запросе |
| Мелкая зона нажатия | минимум 44×44px |
| Отступы «прыгают» | padding через clamp() |
| Текст обрезается | перенос или короткая формулировка |
Вкладки: примеры
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 24px);
border-radius: 8px;
min-height: 44px;
font: inherit;
background: #003F8F;
color: #fff;
border: 0;
cursor: pointer;
}clamp() плавно меняет отступы: на узком экране они меньше, на широком — больше. Одной строкой вместо медиа-запросов.
@media (max-width: 600px) {
.btn-block { width: 100%; }
}На мобильных кнопка во всю ширину удобнее: легко попасть, не «промахиваешься» мимо мелкой кнопки. На десктопе — обычная ширина по содержимому.
.actions {
display: flex;
flex-wrap: wrap; /* переносим кнопки */
gap: 12px;
}
@media (max-width: 480px) {
.actions .btn { flex: 1 1 100%; } /* каждая на своей строке */
}Группа кнопок переносится и на телефоне становится «столбиком» — так удобнее нажимать.
.btn svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}Иконка в кнопке масштабируется вместе с текстом благодаря размеру в em и не сжимается (flex-shrink: 0).
Практика: адаптивная кнопка
- Опишите базовый класс кнопки с минимальной высотой 44px.
- Отступы задайте через
clamp(). - Добавьте медиа-запрос для «ширины во всю ширину».
- Опишите состояния
:hoverи:focus-visible. - Проверьте с длинным текстом.
- Проверьте на телефоне реальным пальцем.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кнопка «вылезает» на мобильном | фикс-ширина | max-width: 100% |
| Тяжело нажать | маленькая высота | min-height: 44px |
| Текст обрезан | нет переноса | перенос или короткий текст |
| Кнопки «слиплись» | нет gap |
добавить промежутки и перенос |
Проверьте себя
clamp() в отступах кнопки?
Вопросы и ответы
Нет. На мобильных это удобно для главного действия, на десктопе широкая кнопка выглядит «тяжело». Ограничивайте ширину на больших экранах.
Одна главная («Заказать») и максимум одна второстепенная («Подробнее»). Много равнозначных кнопок запутывает.
Откройте сайт на телефоне и попробуйте нажать кнопку одной рукой, не глядя. Если попали — размер достаточный.
Сократить формулировку — это лучший вариант. Если нельзя — разрешить перенос на две строки и задать нормальный line-height.
Итоги
- Минимальная высота кнопки — 44px.
- Отступы удобно задавать через
clamp(). - На мобильных главная кнопка — во всю ширину.
- Опишите состояния и проверьте текст на «влезаемость».
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.