Buttons

Primary

This is a primary button. It represents the primary action someone should take when they land on any given page. Primary buttons have a solid background color, and should be reserved for only one action per page.

Call to Action

Call to Action
<button class="mzp-c-button">
  Call to Action
</button>

<a href="#" class="mzp-c-button">
  Call to Action
</a>

<br/>
<br/>

<button class="mzp-c-button mzp-t-small">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-small">
  Call to Action
</a>

Tips

  • This can be a button element, an input type="button" in a form or a link.
  • Avoid using button styling for ordinary links that simply lead to another page. Buttons should typically trigger some specific action. Buttons do things; links go places.
  • That said, sometimes the action is to visit another page. A strong call to action might be a link styled as a button. Use them wisely.

Primary (Dark)

This is a primary button displayed on a dark background. Add the class mzp-t-dark to change the button color from dark to light.

Call to Action

Call to Action
<button class="mzp-c-button mzp-t-dark">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-dark">
  Call to Action
</a>

<br/>
<br/>

<button class="mzp-c-button mzp-t-small mzp-t-dark">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-small mzp-t-dark">
  Call to Action
</a>

Secondary

This is a secondary button with a hollow, transparent background. This button should be used for any additional actions someone can take on any given page that is different from the primary action.

Call to Action

Call to Action
<button class="mzp-c-button mzp-t-secondary">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-secondary">
  Call to Action
</a>

<br/>
<br/>

<button class="mzp-c-button mzp-t-secondary mzp-t-small">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-secondary mzp-t-small">
  Call to Action
</a>

Secondary (Dark)

This is a secondary button displayed on a dark background. Add the class mzp-t-dark to change the button color from dark to light.

Call to Action

Call to Action
<button class="mzp-c-button mzp-t-secondary mzp-t-dark">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-secondary mzp-t-dark">
  Call to Action
</a>

<br/>
<br/>

<button class="mzp-c-button mzp-t-secondary mzp-t-small mzp-t-dark">
  Call to Action
</button>

<a href="#" class="mzp-c-button mzp-t-secondary mzp-t-small mzp-t-dark">
  Call to Action
</a>

Download

Use this theme style for downloading Firefox and other products.

Download Firefox

Download Firefox
<button class="mzp-c-button mzp-t-download">
  Download Firefox
</button>

<a href="#" class="mzp-c-button mzp-t-download">
  Download Firefox
</a>

<br/>
<br/>

<button class="mzp-c-button mzp-t-download mzp-t-small">
  Download Firefox
</button>

<a href="#" class="mzp-c-button mzp-t-download mzp-t-small">
  Download Firefox
</a>

Download (Secondary)

This button is used when the download CTA is not the main action a person should take on a page. An example of this can be seen in the Navigation organism.

Download Firefox

Download Firefox
<button class="mzp-c-button mzp-t-download mzp-t-secondary">
  Download Firefox
</button>

<a href="#" class="mzp-c-button mzp-t-download mzp-t-secondary">
  Download Firefox
</a>

<br/>
<br/>

<button class="mzp-c-button mzp-t-download mzp-t-secondary mzp-t-small">
  Download Firefox
</button>

<a href="#" class="mzp-c-button mzp-t-download mzp-t-secondary mzp-t-small">
  Download Firefox
</a>

Tips

  • Use this theme for Firefox downloads CTA's.

Disabled

This is an example of a disabled button. The disabled property is added on submit to prevents people from submitting their information twice by mistake while submitting a form.



<button class="mzp-c-button" disabled>
  Submit
</button>

<br/>
<br/>

<button class="mzp-c-button mzp-t-small" disabled>
  Submit
</button>

Tips

  • Forms should include enabled buttons by default and notifications should be used to alert users when trying to submit a form without filling out all required fields.