Homepage buttons
Buttons on the homepage are essentially the same as other buttons on the pcc.edu website, but look slightly different.
Guidelines
Button text should be descriptive of where the link is taking you. Keep it short.
Styling
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
White buttons
Apply button
Animation
