Portland Community College | Portland, Oregon Portland Community College

Homepage buttons

Buttons on the homepage are essentially the same as other buttons on the pcc.edu website, but look slightly different.


Button text should be descriptive of where the link is taking you. Keep it short.


Instead of square corners and bottom borders, homepage buttons have rounded corners and bottom and right side borders that resemble a shadow (just like the homepage callouts and spotlights). The call-to-action arrows have a subtle animation on hover and focus, also like the callouts and spotlights.

There are three versions of buttons on the homepage: the green apply button, white buttons that appear on blue or teal backgrounds, and teal buttons that appear on white backgrounds.

Responsive behavior

No change.

Development info
  • Stylesheet location: /_source/styles/homepage/_buttons.scss
  • The arrow is added in the script, no need to add it manually.
  • <a class="button">Teal button</a>
    <a class="button light">White button</a>
    <a class="button green">Apply button</a>

Homepage button examples

Teal buttons

Button: teal

White buttons

Button: white

Apply button

Button: apply (green)


Button: hover animation