Skip to main content

Personal tools

Translate

Buttons

Albuquerque Journal

Use Guidelines

  • No more than 1–3 buttons per page.
  • Buttons need good link text:
    • Link text must be a clear call to action.
      (e.g., "Order your Transcript," "Download the Student Handbook (PDF)," "Submit the Application").
    • Link text may not extend to more than 4 words.

Please contact the Web Team if you have questions about best practices.

Large Buttons

Source Code:
<a class="button button-lg button-red" href="#link">Button Large</a>

button-red (#C41230)
button-dkred (#5e0035)
button-maroon (#7D2929)
button-blue (#3a6f7f)
button-dkblue (#08415C)
button-mdblue (#28569F)
button-green (#2b5f2c)

Medium Buttons

Source Code:
<a class="button button-md button-red" href="#link">Button Medium</a>

Button Medium Button Medium Button Medium Button Medium

Small Buttons

Source Code:
<a class="button button-sm button-red" href="#link">Button Small</a>

Button Small Button Small Button Small Button Small

Helper Classes For Colors

  • Red: button-red
  • Dark Red: button-dkred
  • Maroon: button-maroon
  • Blue: button-blue
  • Medium Blue: button-mdblue
  • Dark Blue: button-dkblue