Button

Example Buttons are common elements that have two typical use cases:

  • Grabbing the visitor's attention to guide them down a desired path.
  • Acting as a control that changes the current page.

Using a consistant button style throughout the Purdue domain increases brand consistency.

Types

By default, Purdue's templates implement five different styles of buttons:

Use brand core colors, Campus Gold and Black, for Call to Action buttons throughout. Color and style can be changed for secondary button elements, or if design requires, but color contrast must be an accessibility consideration.

Hover over the button style to see rollover style. Codes snippet examples are provided.

Solid (Default)

  • Campus Gold (Default)

  • Campus Gold Inverse

	
<button class="button">Button Text Here</button>
	

Hollow

  • Campus Gold (Default)

  • Black

	
<button class="button button-hollow">Button Text Here</button>
	

Solid with Bottom Bar

The bottom bar is a darker shade of the main button color.

  • Campus Gold (Default)

  • 70% Gray

	
<button class="button button-bar">Button Text Here</button>
	

Icon

For buttons with icons, the Font Awesome library is recommended.

  • Default

	
<button class="button button-icon">
	Button Text Here
	<span class="button__icon fa fa-calendar-check-o" aria-hidden="true"></span>
</button>
	

Opaque

Opaque is a variation of the hollow button, most often used over images where the background might cause contrast issues.

  • Default

	
<button class="button button-opaque">Button Text Here</button>
	

Other Modifications

Depending on the type of button selected, there are other modifiers that can be applied to a button to change its appearance:

Colors

Some button types have a select number of color variations available.

The solid, hollow and solid with bottom bar button types have the following color options:

  • Campus Gold (default)
    • class: button-campusGold
  • Campus Gold Inverse
    • class: button-campusGold-inverse
  • Black
    • class: button-black
  • 70% Gray
    • class: button-gray70
  • 40% Gray
    • class: button-gray40
  • 15% Gray
    • class: button-gray15
  • Campus Gold (Default)

  • Campus Gold Inverse

  • Black

  • 70% Gray

  • 40% Gray

  • 15% Gray

	
<button class="button button-gray70">70% Gray Button</button>
	

The icon button type has the following color options:

  • Campus Gold (default)
    • class: button-campusGold
  • Black
    • class: button-black
  • Campus Gold (Default)

  • Black

Light

Modifying a button with "light" will ensure that a button's rest and hover state will work when applied above a darker background.

  • Solid Light

  • Hollow Light

  • Opaque Light

	
<button class="button button-light">Button Text Here</button>
	

Wide

Modifying a button with "wide" will enable the button to span the complete width of its parent.

  • Solid Wide

  • Icon Wide

	
<button class="button button-wide">Button Text Here</button>
	

The "wide" modifier can also be selectively applied to individual Bootstrap 3 media queries by appending the class name with a hyphen and the respective media-query prefix.

Below is a list of the possible media-query-specific "wide" modifier classes:

  • button-wide-lg: only applies "wide" to the button on large desktop screen sizes
  • button-wide-md: only applies "wide" to the button on medium desktop screen sizes
  • button-wide-sm: only applies "wide" to the button on tablet screen sizes
  • button-wide-xs: only applies "wide" to the button on mobile screen sizes

If we only wanted a default solid button to be wide at tablet and mobile sizes, you would use the following HTML:

	
<button class="button button-wide-sm button-wide-xs">Button Text Here</button>
	

Slim

Modifying a button with "slim" will decrease the horizontal padding on inline buttons while also removing the bold and uppercase text modifications

  • Solid Slim

  • Icon Slim

    
<button class="button button-slim">Button Text Here</button>
	

The "slim" modifier can also be selectively applied to individual Bootstrap 3 media queries by appending the class name with a hyphen and the respective media-query prefix.

Below is a list of the possible media-query-specific "slim" modifier classes:

  • button-slim-lg: only applies "slim" to the button on large desktop screen sizes
  • button-slim-md: only applies "slim" to the button on medium desktop screen sizes
  • button-slim-sm: only applies "slim" to the button on tablet screen sizes
  • button-slim-xs: only applies "slim" to the button on mobile screen sizes

If we only wanted a default solid button to be slim at tablet and mobile sizes, you would use the following HTML:

	
<button class="button button-slim-sm button-slim-xs">Button Text Here</button>