Portland Community College | Portland, Oregon Portland Community College

Buttons

Buttons are links that point to other pages or documents just like a basic paragraph link, but they should only be used in certain circumstances. Use a buttons for pointing to things like:

  • an application (such as “apply for this job”)
  • an actionable item (such as “get started” with a series of steps on a different page)
  • things of high importance that need additional visual interest (such as “sign up for a tour”)
  • submitting a form

There shouldn’t be more than one or two buttons on any given page. If you’re unsure whether to use a button or not, assume you don’t need a button.

We have a few different button types available for use, including basic buttons, buttons in forms, callout action buttons and enroll buttons.

Basic buttons

Basic buttons are turquoise and have an arrow indicating that you’re going somewhere else.

Basic button example

Visit the PCC website angle right

Basic button development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • <a href="" class="button">Button text <i class="fas fa-angle-right"></i></a>

Callout action buttons

Optionally, buttons in callouts can be full-width. This makes them more visually pleasing.

Callout button example
Ways to give

From online giving to estate planning, we make it easy for you to make opportunities happen.

 

Give now angle right

Callout button development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • a class="button callout-action"
  • There’s a chance these buttons will overlap the text above them, since they have absolute positioning. If this happens, you need to include break tags before the button.

Enroll buttons

Enroll buttons should only be used to point students toward the steps for new students and applying to PCC. They are green instead of turquoise (to help reiterate the “get started” feeling, and have a large arrow instead of the small angle arrow used in other buttons.

Enroll buttons fill up 100% the width of the space, instead of trimming to the width of the content inside of them like basic buttons. You can put them in callouts or directly on the page.

Enroll button example

Admissions: apply today arrow right

Enroll button development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • a class="button enroll-button" with i class="fa fa-arrow-right"