Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Buttons

Using Buttons

Buttons are built primarily for styling <a> links.

To apply a basic button style to an <a> link:

  1. Add the .button class to your <a> link,
  2. Apply any one of the .bg-* (background) PEGASUS color classes (.bg-cprimary should always be used as default)

Sample Code:

<a href="#" class="button bg-c*">Button Text</a>

Best Practice: Buttons

  • Always use title caps for text inside of icons

Best Practice: Call to Action

  • On landing pages that have specific buttons or calls to action, be sure to include a class with cta-*. Each button should have a unique class for identifying in the analytics.
  • Example: .cta-register or cta-enroll

Buttons + Color

Accessibility Note: Button Colors

Note that the text color of the button is styled to change to either black or white, depending on whatever background color you choose. This is to maximize color contrast.

Button Text 
<a href="#" class="button bg-cprimary">Button Text</a>
Button Text 
<a href="#" class="button bg-csecondary">Button Text</a>
Button Text 
<a href="#" class="button bg-cgrey">Button Text</a>

Buttons + Icons

You can insert any of the Font Awesome 5 icons within a button.

Button with Icon 
<a href="#" class="button bg-cprimary"><span aria-hidden="true" class="ico fab fa-twitter"></span> Button Text</a>

Proper Use: The icon is to always be placed on the left side of the button.

Exception: when a right arrow is used, which should communicate a user's advancement to a new step or phase in their experience. Make sure to use .ico-right.

Buttons + Shadows

You can add any of the shadow classes to any button.

Button with Shadow 
<a href="#" class="button bg-cprimary shadow-2">Button Text</a>

Proper Use: Shadows on buttons should be used sparingly as a way to draw emphasis and visual weight to the button itself.

A suggested use is on buttons that call the user to action. Overuse makes the page unnecessarily cluttered.

Button Sizes

In addition to the default button shown above, there are four additional button sizes available.

Add any of the size classes below to <a class="button">:

  • .button-xl - makes button text: font-size: 1.5rem /* 24px */
  • .button-lg - makes button text: font-size: 1.25rem /* 20px */
  • .button-sm - makes button text: font-size: .8625rem /* 14px */
  • .button-mn - makes button text: font-size: .625rem /* 10px */; text-transform: uppercase

Extra Large Button .button-xl

Extra Large Button Extra Large Button with Icon 
<a href="#" class="button button-xl bg-cprimary">Button Text</a>
<a href="#" class="button button-xl bg-cprimary"><span class="ico fab fa-twitter" aria-hidden="true"></span> Button Text</a>

Large Button .button-lg

Large Button Large Button with Icon 
<a href="#" class="button button-lg bg-cprimary">Button Text</a>
<a href="#" class="button button-lg bg-cprimary"><span class="ico fab fa-twitter" aria-hidden="true"></span> Button Text</a>

Small Button .button-sm

Small Button Small Button with Icon 
<a href="#" class="button button-sm bg-cprimary">Button Text</a>
<a href="#" class="button button-sm bg-cprimary"><span class="ico fab fa-twitter" aria-hidden="true"></span> Button Text</a>

Small Button .button-mn

Mini Button Mini Button with Icon 
<a href="#" class="button button-mn bg-cprimary">Button Text</a>
<a href="#" class="button button-mn bg-cprimary"><span class="ico fab fa-twitter" aria-hidden="true"></span> Button Text</a>

Button Types

Pegasus includes additional button types to meet a variety of uses.

Button Blocks .button-block

This style changes the width of the button to fill the width of its containing element.

Button Block 
<a href="#" class="button bg-cprimary button-block">Button Text</a>

Ghost Buttons .button-ghost

This style gives your button a transparent background. You will need to apply one of the .border-c* (border) classes.

Ghost Button 
<a href="#" class="button border-cprimary button-ghost">Button Text</a>

Button Groups

With Button Groups we can semantically and visually link a row of buttons together. Screen readers and sighted users will alike will now know there is a connection between these buttons/links.

Example of a basic button group:

<ul class="button-group list-inline">
  <li><a class="button bg-csecondary" href="#">Item 1</a></li>
  <li><a class="button bg-csecondary" href="#">Item 2</a></li>
  <li><a class="button bg-csecondary" href="#">Item 3</a></li>
</ul>

Known Issue!

When using Button Groups, you may notice the spacing between each button may be too big. To solve, try removing any spaces or line breaks between the closing of one line item </li> and the opening of the next <li>

Responsive Functionality: Button Groups

  • Under 992 px: the button width will become 50% of its containing element and stack in two columns.
  • Under 576 px: the button width will become 100% of its containing element and stack in one column..

Styling Button Groups

Just like buttons above, any button size, color or type can be applied to the buttons in a Button Group.

Examples in different sizes and colors:

 

Justified Button Groups

For visual reasons, a button group may need to stretch the entire width of the containing element. For these, a modifier class is availableto justify the buttons:

  • .button-group--justified

Example:

<ul class="button-group button-group--justified list-inline">
  <li><a class="button bg-csecondary" href="#">Item 1</a></li>
  <li><a class="button bg-csecondary" href="#">Item 2</a></li>
  <li><a class="button bg-csecondary" href="#">Item 3</a></li>
</ul>
 

Vertical Button Groups

There may be instances where the group of buttons should display vertically instead of horizontally. To accomplish this we use the following modifier class:

  • .button-group--vertical

You will also need to replace the .list-inline class with .list-unstyled

Example:

<ul class="button-group list-unstyled button-group--vertical" arial-label="Needs label">
  <li><a class="button bg-cgrey button-sm" href="#">Item 1 Is Short</a></li>
  <li><a class="button bg-cgrey button-sm" href="#">Item 2 Is Longer Than Short</a></li>
  <li><a class="button bg-cgrey button-sm" href="#">Item 3 Is Longest Button of them all</a></li>
</ul>

Important things to note about Vertical Button Groups:

  • This modifier uses flexbox
  • The width of all the buttons will match the width the button with the most text

Align button text to the left

For visual reasons the button text might need to align left. Simply add the .text-left class to the .button-group block:

<ul class="button-group list-unstyled button-group--vertical text-left" arial-label="Needs label">
  <li><a class="button bg-cgrey button-sm" href="#">Item 1 Is Short</a></li>
  <li><a class="button bg-cgrey button-sm" href="#">Item 2 Is Longer Than Short</a></li>
  <li><a class="button bg-cgrey button-sm" href="#">Item 3 Is Longest of them all</a></li>
</ul>
​