Skip to main content

Buttons and button styles

To create a button, apply a button class to a link, and an optional modifier class to change the color, e.g. button--wvu-blue or button--wvu-blue-fill.

  • Select the text you would like to link
  • Click the "Link" icon in the CleanSlate toolbar
  • Select the page, file, URL, etc.
  • In the Options section add the button classes to the "HTML Class" field 

Example: After typing the words you want in your button (in this case "Learn more about the Eberly College,) highlight the text and use the link button in the CleanSlate toolbar to create the link like normal. Then, click the HTML button (< >) in the toolbar to view the link. You'll need to add a class called "button" in the <a> tag. Below is the HTML used to create the button under it:

<a class="button button--wvu-blue-fill" href="https://eberly.wvu.edu/">Learn more about the Eberly College.</a>

Learn more about the Eberly College.

Button Examples:

Buttonbutton button--wvu-blue
Buttonbutton button--black
Buttonbutton button--pms-432-c
Buttonbutton button--pms-warm-gray-11
Buttonbutton button--pms-warm-gray-7
Buttonbutton button--pms-286-c
Buttonbutton button--pms-300-c
Buttonbutton button--pms-7554-c
Buttonbutton button--pms-7557-c
Buttonbutton button--pms-7476-c
Buttonbutton button--pms-5625-c
Buttonbutton button--pms-180-c
Buttonbutton button--pms-166-c