• Теория
  • Теория

Общие стили кнопок, часть 2

Блочно-строчный тип хорош, но его преимущества мы использовать, конечно же, не будем.

Но дело не в нас, дело в дизайне.

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

Но на макете Кексби можно увидеть, что у всех кнопок одинаковая ширина. И только поэтому в общие стили кнопок мы включим фиксированную ширину. При желании всегда можно будет переопределить это поведение для других кнопок.

Кнопка

На случай, если текста в кнопке окажется больше, чем помещается в одной строке, обезопасим себя свойством word-wrap, которое управляет переносом текста. Мы разбираем это свойство в части по подписке «Оформление текста. Погружение».

Общие стили для кнопок должны быть универсальными, то есть одинаково хорошо менять отображение любых тегов: ссылок, кнопок форм и так далее. У кнопок форм есть проблемы с наследованием свойств шрифта от родителей, поэтому мы должны включить принудительное наследование.

Для этого укажем свойству font значение inherit, которое разбиралось в части «Наследование и каскадирование» тренажёра «Продвинутый HTML и CSS».

И ещё в этом задании зададим выравнивание текста в кнопке по центру и скругление рамки. О скруглении углов с помощью свойства border-radius подробно рассказано в части «Рамки и фоны. Погружение» тренажёра «Сборник: Тонкости CSS», доступной по подписке.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кексби. Четвертьфинал» тренажёра «Великий Кексби, этап 2» можно после регистрации и оформления подписки.