8 layers to perfect button design
π A button is just a rectangle with a value surely? It may seem this simple but your buttons should be designed as a scalable, state based component not just a rectangle. β£ β
β‘οΈ This article covers every layer your buttons need with exact dimensions and 8pt scaling system. β£ β
β£ β
π€¦ββοΈ Every button should begin as a masked base. From here everything within fits the size of your buttons.β£ β
β£ β
πππ Set your button sizes with 32px, 40px and 48px for large buttons β£ β
β£ β
π¨ later on your colors which can be toggled depending on the type of button. β£ β
β£ β
π₯
borders should match the colours of your buttons. Layer these in. β£ β
β£ β
β
States are best done with opaque layering vs a darker shade of the button color. This reduces your palette and keep everything consistent. β£ β
β£ β
βοΈ Value is the text or icon within the button. Text wise, create your styles using 14px and 16px font size with 24px line height. Super clean for the 8pt system. β£ β
β£ β
βοΈ Padding wise follow the 8pt rule and scale things nicely with each button size. β£ β
β£ β
π₯ Icons should be contained in a square that matches your button masks height. β£ β
β£ β
γ°οΈ Constraints. These are so powerful for scaling your buttons dimensions and size! β£ β
β£ β
π I hope you find this post useful and start creating component buttons that are reusable and consistent! β
