Buttons

How to create clickable buttons using our content management system (CMS)

Creating a button is easy to do. If you can create a text link, you can create a button!

1. Type the words that you want to serve as a link. Keep it short. Select the words, then click the Link icon on the WYSIWYG toolbar.

Best Practice: Button text should help explain where the user is going. As with any link, please avoid using generic, non-descriptive phrases, such as "click here."

create a text link

A window should pop up. 

select class

2a. Select the Internal or External radio button; Link: navigate to your internal asset or type in your external URL (including http://); optionally, define options for Anchor, Target and Title. See pages 47-49 of the CMS User Guide for complete instructions.

2b. The last option is Class. Click on the Styles dropdown menu and select "btn-green" for a green button or "btn-blue" for a blue button. Best Practice: Academic department sites that use the green color palette should use the blue button for contrast. 

Once the style has been selected, click Insert.

Note: The button will not display in Edit mode in the CMS. You will only see your linked text. Complete the edits on your page and click Submit to view the button.

submit-button

You should now see the button you created on the page.

Apply Now

Tips & Best Practices

1. Keep button text short and descriptive. Button text should not exceed two lines. If your text extends to a third line, please revise it.

2. Formatting: Capital letters are permitted so long as they are used throughout the button text. No punctuation is needed.

Acceptable

Not Acceptable

APPLY NOW CLICK HERE to apply for this program!

3. You may have noticed there is a Styles dropdown menu in the WYSIWYG toolbar. While the button styles are available from this menu, we do not recommended this method. Please follow the instructions above and create buttons by selecting the button style from the Insert/Edit Link window.

not recommended

4a. If you need to type text after your button, you'll want to make sure the button style does not carry over. Click Return to start a new line. 

4b. With your cursor at the beginning of the new line, click on the Styles menu, then Styles header to remove the button style.

styles dropdown

4c. Verify the style has been removed by checking the Path area. Click Submit to save your work.

Changing Button Color

Changed your mind? No problem! You can edit the color of your button via the Insert/Add Link window.

1. In the WYSIWYG editor, highlight your linked text. Click the Insert/Edit Link icon in the WYSIWYG editor.

2. Click the Styles dropdown menu and select "btn-green" for a green button or "btn-blue" for a blue button. Click Insert.

3. The button will not display in Edit mode in the CMS. You will only see your linked text. Complete the edits on your page and click Submit to view the button.