LP6 Style Guide: Buttons

• CTA Primary
• CTA Primary Invert
• CTA Large Primary
• CTA Large Primary Invert
• CTA Secondary
• CTA Secondary Invert
• CTA Large Secondary
• CTA Large Secondary Invert
• CTA Tertiary
• CTA Tertiary Invert
• CTA Large Tertiary
• CTA Large Tertiary Invert
• CTA Dark
• CTA Dark Invert
• CTA Large Dark
• CTA Large Dark Invert
• CTA Light
• CTA Light Invert
• CTA Large Light
• CTA Large Light Invert

HTML Code Snippet

					
	<a class="button button-primary cta">CTA Primary</a>
	<a class="button button-primary cta invert">CTA Primary Invert</a>
	<a class="button button-primary button-size-large cta">CTA Large Primary</a>
	<a class="button button-primary button-size-large cta invert">CTA Large Primary Invert</a>
	<a class="button button-secondary cta">CTA Secondary</a>
	<a class="button button-secondary cta invert">CTA Secondary Invert</a>
	<a class="button button-secondary button-size-large cta">CTA Large Secondary</a>
	<a class="button button-secondary button-size-large cta invert">CTA Large Secondary Invert</a>
	<a class="button button-tertiary cta">CTA Tertiary</a>
	<a class="button button-tertiary cta invert">CTA Tertiary Invert</a>
	<a class="button button-tertiary button-size-large cta">CTA Large Tertiary</a>
	<a class="button button-tertiary button-size-large cta invert">CTA Large Tertiary Invert</a>
	<a class="button button-dark cta">CTA Dark</a>
	<a class="button button-dark cta invert">CTA Dark Invert</a>
	<a class="button button-dark button-size-large cta">CTA Large Dark</a>
	<a class="button button-dark button-size-large cta invert">CTA Large Dark Invert</a>
	<a class="button button-light cta">CTA Light</a>
	<a class="button button-light cta invert">CTA Light Invert</a>
	<a class="button button-light button-size-large cta">CTA Large Light</a>
	<a class="button button-light button-size-large cta invert">CTA Large Light Invert</a>
					
				

• Primary
• Primary Ghost
• Primary Invert
• Primary Ghost Invert

HTML Code Snippet

					
	<a class="button button-primary">Primary</a>
	<a class="button button-primary ghost">Primary Ghost</a>
	<a class="button button-primary invert">Primary Invert</a>
	<a class="button button-primary ghost invert">Primary Ghost Invert</a>
					
				

• Secondary
• Secondary Ghost
• Secondary Invert

HTML Code Snippet

					
	<a class="button button-secondary">Secondary</a>
	<a class="button button-secondary ghost">Secondary Ghost</a>
	<a class="button button-secondary invert">Secondary Invert</a>
					
				

• Tertiary
• Tertiary Ghost
• Tertiary Invert

HTML Code Snippet

					
	<a class="button button-tertiary">Tertiary</a>
	<a class="button button-tertiary ghost">Tertiary Ghost</a>
	<a class="button button-tertiary invert">Tertiary Invert</a>
					
				

• Dark Gray
• Dark Gray Ghost
• Dark Gray Invert

• Light Gray
• Light Gray Ghost
• Light Gray Invert

HTML Code Snippet

					
		<a class="button button-dark">Dark Gray</a>
		<a class="button button-dark ghost">Dark Gray Ghost</a>
		<a class="button button-dark invert">Dark Gray Invert</a>
		<a class="button button-light">Light Gray</a>
		<a class="button button-light ghost">Light Gray Ghost</a>
		<a class="button button-light invert">Light Gray Invert</a>
					
				

• Primary Ghost
• Secondary Ghost
• Tertiary Ghost
• Ghost Invert

HTML Code Snippet

					
	<a class="button button-primary ghost">Primary Ghost</a>
	<a class="button button-secondary ghost">Secondary Ghost</a>
	<a class="button button-tertiary ghost">Tertiary Ghost</a>
	<a class="button button-primary ghost invert">Ghost Invert</a>
					
				

Submit Buttons

• Submit Button
• Secondary Submit Button
• Tertiary Submit Button

HTML Code Snippet

					
	<button class="button button-primary" type="submit" value="Submit" name="submitButton">Submit Button</button>
	<button class="button button-secondary" type="submit" value="Submit" name="submitButton">Secondary Submit Button</button>
	<button class="button button-tertiary" type="submit" value="Submit" name="submitButton">Tertiary Submit Button</button>
					
				

Submit Inputs

HTML Code Snippet

					
	<input class="button button-primary" type="submit" value="Submit Input" name="submitButton">
	<input class="button button-secondary" type="submit" value="Secondary Submit Input" name="submitButton">
	<input class="button button-tertiary" type="submit" value="Tertiary Submit Input" name="submitButton">
					
				

Reset Buttons

• Reset Button
• Secondary Reset Button
• Tertiary Reset Button

HTML Code Snippet

						
	<button class="button button-primary" type="Reset" value="Reset" name="resetButton">Reset Button</button>
	<button class="button button-secondary" type="Reset" value="Reset" name="resetButton">Secondary Reset Button</button>
	<button class="button button-tertiary" type="Reset" value="Reset" name="resetButton">Tertiary Reset Button</button>
						
					

General guidance

Buttons are typically used to initialize an action. Button labels express what action will occur when the user interacts with it. Examples include Submit, Sign up, Apply Now, and Request Information. Each form should have one primary button. Any remaining calls-to-action should be represented as secondary, tertiary, or unique case buttons.

We do not use button elements as navigational elements, but we do style hyperlinks to look like buttons. Use links when the desired action is to take the user to a new page. The difference between the two is the HTML element used: <button> vs. <a>.

When using multiple buttons, primary buttons always appear to the right. Secondary buttons appear to the left of the primary button and so on.

CSS Snippet

						
	/* Default Button Style Resets */
	button, .button, input[type=submit], input[type=reset], input[type="button"] {
		position: relative;
		display: inline-block;
		font-style: normal;
		font-weight: var(--font-weight-bold);
		font-variant: normal;
		line-height: 1.5;
		text-align: center;
		text-transform: capitalize;
		text-decoration: none;
		margin: 0;
		margin-bottom: 1rem;
		padding: 0.75rem 1.5rem;
		min-width: 150px;
		max-width: 100%;
		border-width: 2px;
		border-style: solid;
		white-space: normal;
		transition: 0.3s;
		-moz-transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	button, input[type=submit], input[type=reset], input[type="button"] {
		-webkit-appearance: button;
	}

	button:hover, .button:hover {
		text-decoration: none;
		opacity: 1;
	}

	/* Primary Button color var(--color-brand-primary) */
	.button.button-primary, input[type=submit], input[type=reset] {
		color: var(--color-sec-white);
		background-color: var(--color-brand-primary);
		border-color: var(--color-brand-primary);
	}

	.button.button-primary.ghost {
		color: var(--color-brand-primary);
		border-color: var(--color-brand-primary);
		background-color: transparent;
	}

	.button.button-primary:hover, .button.button-primary.invert:hover, .button.button-primary.ghost:hover, input[type=submit]:hover {
		color: var(--color-sec-white);
		background-color: var(--color-brand-primary--80);
		border-color: var(--color-brand-primary--80);
	}

	.button.button-primary.invert {
		color: var(--color-brand-primary);
		background-color: var(--color-sec-white);
		border-color: var(--color-sec-white);
	}

	.button.button-primary.ghost.invert {
		color: var(--color-sec-white);
		border-color: var(--color-sec-white);
		background-color: transparent;
	}

	.button.button-primary.ghost.invert:hover {
		color: var(--color-sec-white);
		border-color: var(--color-sec-white);
		background-color: rgba(255, 255, 255, 0.35);
	}

	/* Secondary Button var(--color-brand-secondary) */
	.button.button-secondary {
		color: var(--color-sec-white);
		background-color: var(--color-brand-secondary);
		border-color: var(--color-brand-secondary);
	}

	.button.button-secondary.ghost {
		color: var(--color-brand-secondary);
		border-color: var(--color-brand-secondary);
		background-color: transparent;
	}

	.button.button-secondary.invert {
		color: var(--color-brand-secondary);
		background-color: var(--color-sec-white);
		border-color: var(--color-sec-white);
	}

	.button.button-secondary.invert:hover, .button.button-secondary.ghost:hover, .button.button-secondary:hover {
		color: var(--color-sec-white);
		background-color: var(--color-brand-secondary--80);
		border-color: var(--color-brand-secondary--80);
	}

	/* Tertiary Button var(--color-brand-tertiary) */
	.button.button-tertiary {
		color: var(--color-sec-white);
		background-color: var(--color-brand-tertiary);
		border-color: var(--color-brand-tertiary);
	}

	.button.button-tertiary.ghost {
		color: var(--color-brand-tertiary);
		border-color: var(--color-brand-tertiary);
		background-color: transparent;
	}

	.button.button-tertiary.invert {
		color: var(--color-brand-tertiary);
		background-color: var(--color-sec-white);
		border-color: var(--color-sec-white);
	}

	 .button.button-tertiary:hover, .button.button-tertiary.invert:hover, .button.button-tertiary.ghost:hover {
		color: var(--color-sec-white);
		background-color: var(--color-brand-tertiary--80);
		border-color: var(--color-brand-tertiary--80);
	}

	/* Dark Grey Button var(--color-sec-dark) */
	.button.button-dark {
		color: var(--color-sec-white);
		background-color: var(--color-sec-dark);
		border-color: var(--color-sec-dark);
	}

	.button.button-dark.ghost {
		color: var(--color-sec-dark);
		border-color: var(--color-sec-dark);
		background-color: transparent;
	}

	.button.button-dark.invert {
		color: var(--color-sec-dark);
		background-color: var(--color-sec-white);
		border-color: var(--color-sec-white);
	}

	.button.button-dark.invert:hover, .button.button-dark.ghost:hover, .button.button-dark:hover {
		color: var(--color-sec-white);
		background-color: var(--color-sec-dark--80);
		border-color: var(--color-sec-dark--80);
	}

	/* Light Grey Button  var(--color-sec-medium) */
	.button.button-light {
		color: var(--color-sec-white);
		background-color: var(--color-sec-medium);
		border-color: var(--color-sec-medium);
	}

	.button.button-light.ghost {
		color: var(--color-sec-medium);
		border-color: var(--color-sec-medium);
		background-color: transparent;
	}

	.button.button-light.invert {
		color: var(--color-sec-medium);
		background-color: var(--color-sec-white);
		border-color: var(--color-sec-white);
	}

	.button.button-light.invert:hover, .button.button-light.ghost:hover, .button.button-light:hover, input[type=reset]:hover {
		color: var(--color-sec-white);
		background-color: var(--color-sec-medium--80);
		border-color: var(--color-sec-medium--80);
	}

	/* color modifiers for readability */
	.button.button-primary.button-text-black, .button.button-secondary.button-text-black, .button.button-tertiary.button-text-black, .button.button-dark.button-text-black, .button.button-light.button-text-black {
		color: var(--color-sec-black);
	}
	.button.button-primary.button-text-black:hover, .button.button-secondary.button-text-black:hover, .button.button-tertiary.button-text-black:hover, .button.button-dark.button-text-black:hover, .button.button-light.button-text-black:hover {
		color: var(--color-sec-black);
	}
	.button.button-primary.button-text-white, .button.button-secondary.button-text-white, .button.button-tertiary.button-text-white, .button.button-dark.button-text-white, .button.button-light.button-text-white {
		color: var(--color-sec-white);
	}
	.button.button-primary.button-text-white:hover, .button.button-secondary.button-text-white:hover, .button.button-tertiary.button-text-white:hover, .button.button-dark.button-text-white:hover, .button.button-light.button-text-white:hover {
		color: var(--color-sec-white);
	}
	.button.button-primary.button-border-black, .button.button-secondary.button-border-black, .button.button-tertiary.button-border-black, .button.button-dark.button-border-black, .button.button-light.button-border-black {
		border-color: var(--color-sec-black);
	}

	.button.button-primary.button-border-white, .button.button-secondary.button-border-white, .button.button-tertiary.button-border-white, .button.button-dark.button-border-white, .button.button-light.button-border-white {
		border-color: var(--color-sec-white);
	}

	/* cta style */
	.button.cta, button.cta {
		border: none;
		padding: calc(0.75rem + 4px) calc(1.5rem + 4px);
	}
	.button.button-primary.cta:hover, button.button-primary.cta:hover {
		background-color: var(--color-brand-primary);
	}
	.button.button-secondary.cta:hover, button.button-secondary.cta:hover {
		background-color: var(--color-brand-secondary);
	}
	.button.button-tertiary.cta:hover, button.button-tertiary.cta:hover {
		background-color: var(--color-brand-tertiary);
	}
	.button.button-dark.cta:hover, button.button-dark.cta:hover {
		background-color: var(--color-sec-dark);
	}
	.button.button-light.cta:hover, button.button-light.cta:hover {
		background-color: var(--color-sec-medium);
	}
	.button.button-primary.cta.invert:hover, button.button-primary.cta.invert:hover,
	.button.button-secondary.cta.invert:hover, button.button-secondary.cta.invert:hover,
	.button.button-tertiary.cta.invert:hover, button.button-tertiary.cta.invert:hover,
	.button.button-dark.cta.invert:hover, button.button-dark.cta.invert:hover,
	.button.button-light.cta.invert:hover, button.button-light.cta.invert:hover {
		background-color: var(--color-sec-white);
	}
	.button.button-primary.cta.invert:hover, button.button-primary.cta.invert:hover {
		color: var(--color-brand-primary);
	}
	.button.button-secondary.cta.invert:hover, button.button-secondary.cta.invert:hover {
		color: var(--color-brand-secondary);
	}
	.button.button-tertiary.cta.invert:hover, button.button-tertiary.cta.invert:hover {
		color: var(--color-brand-tertiary);
	}
	.button.button-dark.cta.invert:hover, button.button-dark.cta.invert:hover {
		color: var(--color-sec-dark);
	}
	.button.button-light.cta.invert:hover, button.button-light.cta.invert:hover {
		color: var(--color-sec-medium);
	}
	.button.cta::after, button.cta::after {
	  content:"";
	  width: 0;
	  height: 4px;
	  position: absolute;
	  transition: all 0.2s linear;
	}
	.button.button-primary.cta::after, button.button-primary.cta::after,
	.button.button-secondary.cta::after, button.button-secondary.cta::after,
	.button.button-tertiary.cta::after, button.button-tertiary.cta::after,
	.button.button-dark.cta::after, button.button-dark.cta::after,
	.button.button-light.cta::after, button.button-light.cta::after {
		background-color: var(--color-sec-white);
	}
	.button.button-primary.invert.cta::after, button.button-primary.invert.cta::after {
		background-color: var(--color-brand-primary);
	}
	.button.button-secondary.invert.cta::after, button.button-secondary.invert.cta::after {
		background-color: var(--color-brand-secondary);
	}
	.button.button-tertiary.invert.cta::after, button.button-tertiary.invert.cta::after {
		background-color: var(--color-brand-tertiary);
	}
	.button.button-dark.invert.cta::after, button.button-dark.invert.cta::after {
		background-color: var(--color-sec-dark);
	}
	.button.button-light.invert.cta::after, button.button-light.invert.cta::after {
		background-color: var(--color-sec-medium);
	}
	.button.cta:hover::after, button.cta:hover::after {
	  width: 100%;
	}
	.cta::before{
	  left: 50%;
	  top: 0;
	  transition-duration: 0.4s;
	}
	.cta::after{
	  left: 50%;
	  bottom: 0;
	  transition-duration: 0.4s;
	}
	.cta:hover::before, .cta:hover::after{
	  left: 0;
	}

	/* Button Modifiers  */
	.button-left-align {
		text-align: left;
	}
	.button-right-align {
		text-align: right;
	}
	.button-size-small {
		font-size: 0.85rem;
		padding: 0.5rem 1rem;
	}
	.button-size-large {
		font-size: 1.25rem;
		padding: 1rem 2rem;
	}
	.button-full-width {
		width: 100%;
	}
						
					

When using multiple buttons, the primary button appears to the right and any secondary buttons appear to the left. Research has shown that performance differences between secondary and primary button placement are negligible, however maintaining consistency throughout a product, offering, or platform is crucial. The Secondary / Primary button order (secondary to the left and primary to the right) is therefore our required guidance and should be followed at all times.

• HTML Demo

  This is a pane with dual CTAs

  ResetSubmit

HTML Code Snippet

					
	<input class="button button-primary" type="submit" value="Submit Input" name="submitButton">
	<input class="button button-secondary" type="submit" value="Secondary Submit Input" name="submitButton">
	<input class="button button-tertiary" type="submit" value="Tertiary Submit Input" name="submitButton">
					
				

Pane and Modal button alignment

Single buttons or button groups in panes and modals use full-bleed, full-width buttons. Single buttons span the full width of the pane/modal.

Full-width buttons provide significant advantages in time-to-target evaluations using Fitts’ Law, and are increasingly common in other contexts users are likely to encounter. Button pairs or groups of Primary and Secondary actions are also full-width with each individual button being half-width.

• HTML Demo - Single

  This is a pane with dual CTAs

  Submit

• HTML Demo - Button Group

  This is a pane with dual CTAs

  ResetSubmit

If there is a third action, place this within the modal itself as a link, rather than alongside the Secondary / Primary buttons.

Use this same layout for buttons in side panels (for example, the fixed navigation in this styleguide). Use full-width single buttons or full-width Secondary / Primary button pairs. If there is a third action, considering placing it within the side panel itself, rather than as part of the button group.

Side panel buttons should be visible without scrolling. They should be visible if they’re at the top, the bottom (without scrolling), or sticky and at the bottom of the view if the content is longer than the viewport.

Non-modal forms

On non-modal or in-page forms, align single buttons or Secondary / Primary button groups to the left. Buttons should align with the form controls regardless of the user‘s window width.

Multi-step forms

When the primary action implies a navigation step forward, as in a wizard or widget, align single buttons or Secondary/Primary button groups to the right. This position conveys the “next step” intention.

Button labels should clearly indicate the action of the button. Use active verbs, such as Apply or Request. Use title-style capitalization (all words in a phrase are capitalized) and no more than three words for button labels.

For sets of buttons, use specific labels, such as Submit or Reset, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.

For consistency, shoud we build out a content glossary that includes approved labels?

• Use SVG glyphs (16px) or FontAwesome icons within buttons.
• Glyphs are distinguished by their solid shape and knocked-out details.
• Glyphs should always appear to the right of the text.
• Glyphs used in buttons must be directly related to the action that the user is taking.
• Glyphs must be the same color value as the text within a button.

• FontAwesome Example

  Use a span inside a hyperlink or button with class of icon-{name}.

  Right Arrow

  							
  <a href="#" class="button button-primary">Right Arrow <span class="icon-arrow-right"></span></a>
  							
  						

• SVG Glyph Example

  Use a span inside a hyperlink or button with class of svg-icon. Then use a php include of the SVG glyph.

  Right Arrow

  							
  <a href="#" class="button button-primary">Right Arrow <span class="svg-icon"><?php include($GLOBALS["commonContent"]."images/icons/arrows-flexible.svg") ?></span></a>
  							
  						

On Hover

• Slide Left Highlight
• Slide Up Highlight
• Slide Icon
• Underline to Bordered
• Ghost to Bordered
• Pick Me!
• Geometric

Infinite CTA

• Jiggle
• Shake
• Pulse

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles. Button modifiers should be reserved for special use cases.