Tag: buttons

Buttons

There are three button colors that can be used in the CMS. They can easily be created when you set up your link or you can use the List Spread Buttons snippet to created multiple buttons in a row.

Yellow

Black

Blank

Primary Button

Good for calls-to-action, think of it as a main purpose for a user on a page. You can find examples on our Apply Now page and in the sidebar of our magazine which prompts the user to download the magazine.

Primary Button

Secondary Button

This button compliments a primary button in some format. Generally, you only use this button if you already have a primary button somewhere on your page.

Secondary Button

Styled Button

If you’re looking to have a link that is a bit more stylized but not necessarily a call to action, this is a good option. These links can be seen on our homepage as the link to more news and on profiles with CV’s. This is the default button style in the List Spread Buttons snippet, the RSS Feed Combined snippet, and the Top Title w/More Links snippet.

Styled Button

Creating a Single Button in the CMS

JustEdit Editor in an Editable Region

  1. Type the text you want to be in the button.
  2. Select the text and choose the Insert/edit Link icon from the toolbar. Insert/edit link icon.
  3. Enter the URL for the button to link to or select the appropriate CMS link using the file picker.
    insert-link
  4. From the Class dropdown at the bottom of the window choose “Link Button Yellow,” “Link Button Gray,” or “Link Button Blank.”
  5. Click the blue OK button.

“Mini Editor” in an Asset

  1. Type the text you want to be in the button.
  2. Select the text and choose the Insert/Edit Link icon from the toolbar. Insert/edit link icon.
  3. Link the text using the Link URL field.
    Insert/Edit Link window
  4. Go to the Advanced tab.
  5. Enter the appropriate button code in the Classes field (without quotation marks).
    1. “button” for a yellow button
    2. “button-black” for a black button
    3. “button-blank” for a blank button
      Advanced tab of the insert/edit link window
  6. Insert.

Creating Multiple Buttons in a Row in the CMS

Use the List Spread Buttons Snippet to create multiple buttons in a row.


List Spread Buttons Snippet

This snippet creates a row of buttons that link to other pages or websites. The default button style is the “blank” style. When hovering over the button it gets a gold fill. The button width changes to fit all buttons evenly in the available area and the height changes to fit all link text.

list-spread-blank-example

list-spread-blank-snippet

  1. Enter the text for each button, up to five, in the field.
    1. Text only needs to be separated by a space as each link will become a button.
  2. Link each button’s text to the appropriate place.
    1. When you are creating the link, from the Class dropdown you can choose Button (Anchor) to create a gold button that turns grey on hover or Button Black (Anchor) to create a black button that turns gold on hover.

If your page has no left navigation and no right sidebar, you can use up to five buttons. If you have either the left navigation or right sidebar, only use up to four buttons. If you have both the left navigation and right sidebar, you can use up to three buttons.