Marsha Docs

Buttons Shortcode

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.

Note on Buttons

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.
    • White Outline - This button will display with a transparent background with white text and a white outline to the button. It should only be used on dark page backgrounds.
  • Target (target): There are 2 options for button targets, but setting a target is optional:
    • Self - This is the default if a target isn't added to the shortcode. This is will open the link in the current window. This should be the option used in most cases.
    • Blank - This will open the link in a new tab or window. This option should rarely be used.

Button Shortcode Examples

Default Button

We did not set a type or target so this button will display as a green button and open a link in the same window.

Shortcode
HTML
[efsbutton link="http://www.marshall.edu" title="Visit Our Wesbite"]
<a href="http://www.marshall.edu" class="btn btn-green">Visit Our Website</a>
Copy Code to Clipboard
Copy Code to Clipboard

White Button

Shortcode
HTML
[efsbutton link="http://www.marshall.edu" title="Visit Our Wesbite" type="white"]
<div class="bg-green p-6"><a href="http://www.marshall.edu" class="btn btn-white">Visit Our Website</a></div>
Copy Code to Clipboard
Copy Code to Clipboard

White Outline Button

Shortcode
HTML
[efsbutton link="http://www.marshall.edu" title="Visit Our Wesbite" type="white-outline"]
<div class="bg-green p-6"><a href="http://www.marshall.edu" class="btn btn-white-outline">Visit Our Website</a></div>
Copy Code to Clipboard
Copy Code to Clipboard

Button with a Blank Target

Shortcode
HTML
[efsbutton link="http://www.marshall.edu" title="Visit Our Wesbite" target="blank"]
<a href="http://www.marshall.edu" class="btn btn-green" target="_blank">Visit Our Website</a>
Copy Code to Clipboard
Copy Code to Clipboard