Website Style Guide - Buttons

Submit buttons

These are done by default on forms.

Submit Button 


Rounded Rectangle Buttons

Add text, create link and select the appropriate button style from drop down class menu in link window

MTSU Blue ButtonPink ButtonLight Blue Button Purple ButtonGreen Button Navy Button


Buttons - Card Box with Heading and Text

This creates a centered 3 card layout with heading and text.

Implementation Instructions

Implement using the following steps:

  1. Insert component 
  2. Select "Buttons - Card Box with Heading and Text"
  3. Fill in all information
  4. Click save


Image Buttons with Hover Effect

This gallery displays the image description & link(s).

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Insert component
  • Select "Buttons - Image Buttons with Hover Effect"
  • Select your image gallery asset
  • Select alignment
  • Click save

The link format must be the following:

  • https://www.example.com

The text for the button goes in the "Description" field for the photo.


Image Buttons without Hover Effects

This gallery displays the image description & link(s).  

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Insert component
  • Select "Buttons - Image Buttons without Hover Effect (Gradient Style)"
  • Select your image gallery asset
  • Select alignment
  • Click save

The link format must be the following:

  • http://www.example.com