Style button types / states

[masakudamatsu]

Sketch: https://codepen.io/masakudamatsu/pen/vYNdbjg

Style buttons differently for the following states:

• Default
• Focus/Hover
• Active

Reference:

• Try multiple layers with pseudo elements (reference)
• Create a smaller button behind and apply the shadow: https://www.evernote.com/l/AFNiu8GA9e9Czo2EFIvtKCtZ0GT_3BU6mOU

Following Curtis 2016, differentiate primary buttons from secondary buttons

Following Sticka 2018 , we take the following order:

• Focus
• Disabled
• Hover / Active

Focus / Hover

• These two states should look the same. Both states indicate that the button is ready to be clicked. The difference is just whether a mouse cursor or a keyboard makes the button ready to be clicked.
• Make the button brightened up, as if the button itself is switched on.
• Inspirations: shining, color-filling,

[masakudamatsu]

Remove the distinction between primary and secondary buttons. In every page, the first button the user sees is the primary button. There's no need to make it stand out by filling the color.