Как правильно писать стили для кнопки?

Question

[Conera]

Как правильно верстать кнопку
через падинги расширять бекграунд или высоту и ширину?

Comments

[Виталий Першин]

Смотря какая кнопка

[Muslim Mamaev]

код кнопки выложи button или submit

[Ankhena]

Как обычно, нет универсального ответа.

Первым делом нужно подумать о том, что текст в кнопке может измениться. Может получиться несколько строк. Или могут быть очень длинные слова, которые не поместятся в ширину мобилки.
И при этом ничего никуда не должно выползти.

Значит, мы не можем задать одновременно и высоту и ширину фиксированными.
Но можем задать фиксированным один из параметров или ограничить минимальными и/или максимальными значениями.
Например, кнопка на мобилках должна занимать всю доступную ширину формы. Значит, мы должны позволить ей растягиваться по высоте на столько, на сколько ей нужно.

Паддинги мы должны задать в любом случае, чтобы ничего никогда не прилипло к краям (конечно, ещё есть абсолюты, которые могут).

Иногда получается так, что шрифт + line-height + симметричные padding не дают макетную высоту кнопки. Например, получается 49px, а в макете 50.
Можно дополнительно задать мин высоту 50 и центрирование флексом.

Лучше рассматривать конкретный пример.

[Semantic.Moscow]

Ankhena,

Иногда получается так, что шрифт + line-height + симметричные padding не дают макетную высоту кнопки. Например, получается 49px, а в макете 50.
Можно дополнительно задать мин высоту 50 и центрирование флексом.

а можно пример?

<button>text</button><style>
button{height:50px;font-size:10px;line-height:50px}</style>

[Ankhena]

Semantic.Moscow, можно
Любой четный размер шрифта и lh 1.5

[Semantic.Moscow]

Ankhena, и вот тут сразу загвоздка - или крестик снимите, или трусы наденьте
т.е. или мы попадаем пиксель в пиксель,
или отказываемся от точности и указываем все размеры относительными, начиная с неизвестного нам em

[Ankhena]

Semantic.Moscow, я выше написала способ, решающий эти проблемы.

Почему em нам неизвестен, я не очень поняла. Да и вообще о em речи не шло.

Могу добавить, что вертикальные отступы не обязаны быть симметричными. При некоторых шрифтах это будет выглядеть по уродски.
Это был лишь пример проблемы и вариант, что с ней делать.

[Semantic.Moscow]

Ankhena, угадаете, какой у меня в браузере установлен размер шрифта по умолчанию? (про неизвестный em)

и если размер шрифта чётный, то и размер lh ну никак нельзя указывать относительным.
даже, если шрифт особенный и никак не хочет вставать ровно посередине,
это легко компенсируется свойствами бордера.
и никакие паддинги не нужны. (лучше сразу обнулить всё - *{padding:0;margin:0) и подгонять под размеры кнопок только высоту надписи, чтобы не держать в голове ещё и отступы.

проблема высосана из пальца.

[Ankhena]

Semantic.Moscow,

лучше сразу обнулить всё - *{padding:0;margin:0

В своих проектах используйте, что нравится, только новичкам, пожалуйста, не советуйте.

и если размер шрифта чётный, то и размер lh ну никак нельзя указывать относительным.

Эммм, ну ок, если у дизайнера fz 14, а lh 21, вообще без разницы в каких единицах я его задам у себя в верстке (с точки зрения чет/нечет и симметричности)

угадаете, какой у меня в браузере установлен размер шрифта по умолчанию? (про неизвестный em)

Если для всех шрифтов размеры заданы в em, то не угадаю. Да и зачем бы мне...
И как раз таки line-height коэффициентом решает эту проблему.

если шрифт особенный и никак не хочет вставать ровно посередине,
это легко компенсируется свойствами бордера

Можно и бордером, только не универсально и не очень логично. Для однотонных и без макетного бордера пойдет.

проблема высосана из пальца.

Вообще не вижу проблемы.
И по-моему, вы очень сильно удалились от вопроса автора.

[Semantic.Moscow]

Ankhena, меня очень смутили обязательные паддинги в ответе "чтобы ничего никогда не прилипло к краям" и про 49px, где поможет вертикальное выравнивание флексами.

[Ankhena]

Semantic.Moscow, вы считаете бордеры для отступов универсальным решением?
Да, в затейливых дизайнерских случаях, можно использовать всякие костылики, но по возможности, лучше пользоваться свойствами, соответствующими своему смыслу. Свойство для внутренних отступов это padding. В случае выравнивания кнопок замена padding на border ничего не добавляет, а логику убирает.

Флекс не поможет центрировать?

Я где-то сказала, что способ делать кнопки один и поступать надо так и только так?

[Semantic.Moscow]

Ankhena, флекс не поможет центрировать, если у вас высота 49px

я и не предлагал заменять паддинг бордером,
как по мне, так лучше указать line-height, который займёт всю высоту кнопки (запретить перенос!)
а вертикальное выравнивание (если уж получилось вляпаться в 49px или странный шрифт), компенсировать верхним или нижним бордером, которому присвоить inset или outset, чтобы подвинуть тот самый пиксель

почему не паддинг?
ну, потому, что если шрифт вдруг не подгрузится или будет заменён резервным по какой-то причине браузером, то у нас не случится никакого сдвига из-за разницы в высоте глифов. (про font-stretch тоже не забываем!)

ну и ошибка новичка - не предусмотреть text-decoration или :hover{font-weight:bold или что там могут напридумывать...

в общем, делать отступы от такой непостоянной штуки, как шрифт, это такое себе.
а тут ещё и про кнопки, где есть :active

[Ankhena]

Semantic.Moscow,

флекс не поможет центрировать, если у вас высота 49px

А там рядом ничего не написано про 50 и куда и как его задать?

как по мне, так лучше указать line-height, который займёт всю высоту кнопки (запретить перенос!)

Если вам нравится, когда текст выпадает из кнопки - пожалуйста, запрещайте переносы.
И да, так делали 5 лет назад, когда не было флексов.
Можно ещё обрезать overflow. Отличная кнопка будет.

почему не паддинг?
ну, потому, что если шрифт вдруг не подгрузится или будет заменён резервным по какой-то причине браузером, то у нас не случится никакого сдвига из-за разницы в высоте глифов. (про font-stretch тоже не забываем!)

Ок.
Кнопка не прыгнет.
Прыгнет всё остальное.

ну и ошибка новичка - не предусмотреть text-decoration или :hover{font-weight:bold или что там могут напридумывать...

Это один из вариантов переполнения.
Флексы прекрасно с этим справляются.

или что там могут напридумывать...

Да, в первом комментарии я описала то, о чем хорошо бы подумать в первую очередь и описала как раз вчерашнюю проблему одного из студентов.
А в самом низу было написано (неловко повторять, но извините):

Лучше рассматривать конкретный пример.

Потому что только для конкретного примера можно разобрать все варианты и решить как лучше именно для него.

[Ankhena]

Semantic.Moscow, и, пожалуйста, перестаньте тегать меня в комментариях.
Хотите рекламировать устаревший способ с line-height равным высоте, про обнуление всех отступов для * и т.д. пишите напрямую ТС.