Полезные стили для кнопок



Дэвид Бушелл делится набором дефолтных стилей для кнопок, который он добавляет в свои проекты. И каждое свойство обосновывает.



- touch-action: manipulation поможет отключить спецэффекты типа зума страницы по двойному тапу в мобильных браузерах.

- user-select: none выключит выделение текста кнопок (если нужно).

- ::file-selector-button даст стилизовать кнопку выбора файла для <input type=file>.

- inline-size: fit-content — моё любимое, задаёт кнопке ширину по контенту, а не контейнеру.



Как обычно, почитайте внимательно, что даёт каждый из советов Дэвида. У любого свойства есть спецэффекты, их хорошо бы понимать прежде, чем внедрять в проект. Но в общем и целом набор интересный, себе в закладки добавил.



https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/