Unify button styles

[kristinashu]

Based on @sabrinang @natalieworth's amazing work in MozillaFoundation/Design#317

• Design has been finalized
• Link to original design ticket
• Link to related ticket [n/a]
• Link to Redpen [screen caps below]
• Design changes been merged into the master Sketch file [see Style Guide file]
• Desktop and mobile mockups are included
• Assets are included [n/a]
• Hover state for elements are designed
• Other states for elements are designed (e.g., error state for form) [n/a]

Button Clean up and Proposed Changes

Button class names

• .btn-normal to .button-primary (.btn-primary)
• .btn-ghost to .button-secondary (.btn-secondary)
• .btn-pop to .button-pop (keep the name)

Button Labels

• text-transform: remove uppercase (we can't enforce sentence case in code and there will be exceptions like capitalizing names etc.)
• letter-spacing: 0px (remove)

Button Styles

• Button Primary Updates:
  color: $white
  background: $blue
  hover background: $dark-blue

• Button Secondary Updates:
  color: $black
  background: none (transparent)
  border: 2px solid $black
  hover background: $black
  hover color: $white

• Button Pop Updates:
  background: none (can this be transparent with the shadow?)
  hover: instead of it popping out, it presses in (example)

Dark Theme Button Styles

• Button Primary Dark Theme Updates:
  color: $white
  background: $blue
  hover background: $light-blue
  hover color: $black

• Button Secondary Dark Theme Updates:
  color: $white
  background: none (transparent)
  border: 2px solid $white
  hover background: $white
  hover color: $black

• Button Pop Dark Theme Updates:
  background: none (can this be transparent with the shadow?)
  border: 2px solid $white
  hover: instead of it popping out, it presses in (example)

Button Arrangement

• Alignment: all left-aligned (exceptions support navigation or UI like .button-pop)

• Spacing: margin/padding unchanged and only primary button is full-width on mobile

• Order: if there are multiple buttons order by importance left to right

• Multiple buttons: always have them on separate lines with margin-bottom 8px spacing
  

Buttons are also documented in UI components in wagtail: https://foundation.mozilla.org/en/docs/brand/design/ui-components/

[mmmavis]

Note:

1. after chatted with @sabrinang we have decided to keep the button class name prefix btn- (instead of button-) to align with Twitter Bootstrap's naming convention.

2. PR will not address things mentioned in "Button Arrangement" as they are more best practices for designers and content writers to follow.

[mmmavis]

Done! Follow-up ticket filed here: #2936