Foundation Site: Buttons & Links

[sabrinang]

Description

Audit the current button and link styles on the site and examine what we want to introduce or update by referring to new blue sky ideas. Mockup new ideas in context of existing site and collect feedback. After successful review, we can prepare for implementation.

Buttons and links may include:

• call to action buttons
• buttons
  • main, secondary, inverse
• button states
  • active, hover, disabled
• button type
  • internal link, external link
• links
  • learn more, read more etc.

[kristinashu]

Note #278

[sabrinang]

Note: audit buttons on mobile views (margin, button alignment and button width)
example: current pages & new footer mockups have a few styles on one page

[sabrinang]

@natalieworth I did an audit on existing buttons on brand working slides (slides 41-47): https://docs.google.com/presentation/d/1mQJOwKj1OQkXlhHOVa2uLX0gRPQ-PffW0B3ffXztk5w/edit?usp=sharing and I put some notes that'll guide our decision/documentation convo

[natalieworth]

Noting button progress (before speaking with Sabrina today):

Notes from meeting:

• fix/ check margins and alignment of buttons on the foundation site
• make all primary buttons full-width
• secondary buttons and ghost will be align left
• double buttons will be stacked with 8px spacing
• change button content to sentence case
• evaluate the ‘disable’ button style (on buyers guide site)
• before and after icons on buttons (social before example is on buyers guide site, external link is after on buyers guide site)
• post petition share buttons
• remove (?) facebook buttons

[sabrinang]

@natalieworth
Testing some of the hover states and what you have so far on invision to see them in an interactive context: https://invis.io/8QR4EO1E5TG#/353450240_Button_Test

A few hover states to confirm:

• for popped button, does the button pushes back or shadow disappers? (I mocked up it pushing back)
• testing out primary button hover for dark theme (light blue in mockup)
• secondary button on dark theme is the only text that isn't black or white

[kristinashu]

This ticket is currently blocking Mavis' work on:

• Add a donation ask above the footer of the foundation site #2833
• Footer: remove existing email section, update footer, and add new 'email' signup to footer #2834

@sabrinang @natalieworth can one of you please summarize the decisions in an implementation ticket?

[natalieworth]

So for notes for @sabrinang comment:

• for popped button, the button will push back (like in the mockups)
• I have added the primary and secondary buttons in the Style Guide/ Sketch file too for reference:

cc @mmmavis

[sabrinang]

Button Clean up and Proposed Changes

Button class names

.btn-normal to .button-primary
.btn-ghost to .button-secondary
.btn-pop to .button-pop

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

[sabrinang]

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

Work in progress button elements:

Disabled Button State: to be determined
In-line Icon Button: to be determined
Grouped Buttons: to be determined
Social Buttons: to be determined

[kristinashu]

Thank you @sabrinang @natalieworth! This is sooo good!

I'll go ahead and open an implementation ticket for Mavis, I'll just copy what you wrote above. And then I'll close this and open a follow up design ticket for the remaining button work.

That sound okay?

[kristinashu]

Tickets:

• Design follow-up - Foundation Site: Buttons & Links con't Foundation Site: Buttons & Links con't #339
• Implementation - Unify button styles Unify button styles foundation.mozilla.org#2905