Некоторые параметры, влияющие на размер кнопки в современных веб-интерфейсах:
- Контекст использования. 1 Есть разные размеры кнопок, например: XS, S, M, L и XL. 1 XS используют для действий в компонентах ограниченных размеров, S — в ситуациях, где обычные кнопки слишком крупные и занимают много места, M — основной размер, который рекомендуют применять по умолчанию. 1 L применяют для выделения основных действий в формах создания, модальных или всплывающих окнах, XL — в местах, где нужно выделить действия и есть достаточно места для размещения. 1
- Форма. 1 Есть кнопки округлой формы, с острыми углами или в виде круга. 1
- Ширина. 1 По умолчанию кнопка подстраивается под текст и может растягиваться по ширине, чтобы вместить весь текст, не обрезая его. 1 Но можно управлять шириной кнопки с помощью свойств auto и max: 1
- auto — ограничивает размеры кнопки так, чтобы она не выходила за пределы контейнера. 1 Если содержимое кнопки не помещается в контейнер, оно будет скрыто с помощью многоточия. 1
- max — задаёт фиксированную ширину кнопки, равную ширине родительского контейнера. 1 Если содержимое кнопки превышает эту ширину, оно также будет скрыто с помощью многоточия, что позволит сохранить компактный вид интерфейса и избежать переполнения контейнера. 1
- Отступы. 2 Отступы в кнопке должны быть симметричны со всех сторон. 2
- Безопасное пространство. 4 Это расстояние от кнопки до других элементов страницы. 4 Если рядом располагаются несколько кнопок, для каждой из них должен быть предусмотрен индивидуальный безопасный отступ. 4