Marsha Docs

Buttons

Buttons should only be used sparingly on University websites. They should be used in cases of calls to action which need a bit more prominence than a traditional web link. Since one of the two main use cases for usage of buttons is to prominently stand out on a page, the number of buttons on a page should be limited.

Buttons should only be used as calls to action. You shouldn’t title a button “For Students” or “More Info”. Good titles for buttons would be “Download Forms” or “Signup For More Information”. If the University web team notices misuse of buttons we will reach out and work with you to correct the content.

Button Shortcode Parameters

The parameters for the button shortcode:

  • RequiredTitle (title): This is the text that will display in the button. Remember, buttons should be calls to action. This title should represent that action. Also, do not add any HTML or inline CSS to the title.
  • RequiredLink (link): This is the URL where the button should link.
  • Type (type): There are 3 options for type of button, but setting a type is optional:
    • Green – This is the default button for our WordPress theme if a type isn’t added to the shortcode. It will display as a green button with white text.
    • White – This button will display as a white button with green text. It should only be used on dark page backgrounds.
Dos
  • Keep button text short, should not be more than 3-5 words
  • Use the active voice as button text, a call-to-action for the user
Don'ts
  • Put an entire sentence as the button text
  • Use a button to link to another page in text

Button Shortcode Examples

Default Button

We did not set a type so this button will display as a green button.

Visit Our Website
[mu_button link="http://www.marshall.edu" title="Visit Our Website"]
Copy Code to Clipboard

White Button

Visit Our Website
[mu_button link="http://www.marshall.edu" title="Visit Our Website" type="white"]
Copy Code to Clipboard

Brown Call-to-Action

Visit Our Website
[mu_button link="http://www.marshall.edu" title="Visit Our Website" type="brown-text"]
Copy Code to Clipboard