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 buttons for pointing to things like:
- An application (such as “apply for this job”).
- An actionable item (such as “get started”, linking to a series of steps on a different page).
- Things of high importance that need additional visual interest (such as “sign up for a tour”).
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.
Jump to a component:
Basic buttons
Most buttons on the website are basic buttons.
Styling
Basic buttons are turquoise and have an arrow indicating that you’re going somewhere else. The arrow is animated on hover.
How to use for Basic buttons
Add in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Basic buttons
Stylesheet location:
/_source/styles/components/_buttons.scss
Don’t add an arrow after the text – the CSS adds one automatically.
<a class="button" href="">Button text</a>
Example of Basic buttons
Callout action buttons
See information about callout action buttons.
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.
Styling
Enroll buttons fill up 100% of 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.
How to use for Enroll buttons
Add in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Enroll buttons
Stylesheet location:
/_source/styles/components/_buttons.scss
Don’t add an arrow after the text – the CSS adds one automatically.
<a class="button enroll-button" href="">Button text</a>
Example of Enroll buttons
Full-width buttons
Full-width buttons should be used sparingly, only when the design calls for them. Basic buttons are the preferred type in most cases.
Styling
Full-width buttons fill up 100% of 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.
How to use for Full-width buttons
Add in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Full-width buttons
Stylesheet location:
/_source/styles/components/_buttons.scss
Don’t add an arrow after the text – the CSS adds one automatically.
<a class="button expand" href="">Button text</a>
Example of Full-width buttons
Form input buttons
Learn about PCC’s form styling.