Tips & Principles
Make buttons large enough to press
Buttons should be identifiable & indicate that they will trigger an action
Use expected button locations – check apps you use every day. This creates a sense of familiarity for your users
Stay consistent with your button designs and hierarchy
Don’t wrap text in your apps, should remain a single line
Types of Buttons
1. Contained Button (High Emphasis)
Font: Lato / Bold, Size 12
Size: Width: 104 Height: 36
Color: Fill Hex: AC1D8F, Border: N/A
2. Outlined Button (Medium Emphasis)
Font: Lato / Bold, Size 12
Size: Width: 104 Height: 36
Color: Fill: None, Border: Hex: AC1D8F
3. Text Button (Low Emphasis)
Font: Lato / Bold, Size 12, Color Hex: AC1D8F
Size: Width: 104 Height: 36
Color: Fill: None, Border: None
Sizing
Text in a button should have padding of 16 on the left & right, 12 on top & bottom. Easy way to accomplish is by setting your buttons properties to this:
Height: Button.Text + 24
Width: (Len(Button.Text)*12)+32
Button Drop Shadow
You can create drop shadows with the HTML text control or by importing a svg file, but here's a simple way to do it.
I use two layers, a back and front button. The front button is designed based on the contained button specs on the far left. The back button is 4px wider & 2px taller. Back button should be centered & topped align to the front button. The color fill is ColorValue(“#00000040”)