• Departments & Offices
• University Communications
• University Web & Design
• Web & Apps
• Cascade
• Help
• Building & Editing
• Tools & Techniques
• Content Buttons

Content Buttons

Turn your link into a button. No image work required.

Easy does it. As with other treatments that embellish the text, you don't want to overdo it. 

Create a Button

1. Create a link on its own line. Sample link text: Register, Apply Now, Activate Your Account, etc.
2. In the Insert/edit link dialog box:
   1. Use the Styling field to select the content_button custom format. 
   2. Select Ok
3. Submit the page, then review your content button.

As an alternate method, you can highlight an existing link on your page and open the Formats >> Custom sub-menu to apply the content_button format as well.

To create multiple buttons aligned horizontally, create the links on the same line and apply the button format to each link. Buttons will drop below each other when necessary to accommodate narrower screen widths.

Formatting Guidelines

• Buttons are customized per school and will automatically use your site's colors.
• Keep it short. Button text will automatically accommodate the screen width, wrapping the text when necessary.

A Button

First Button on a LineSecond Button on a Line

How to Link a Content Button to an Email Address

1. Follow the steps above to create a button
2. In the Insert/edit link dialog box:
   1. Select External for the Link Type.
   2. In the Link Source field, fill in 'mailto:' followed by the full email address - e.g., mailto:tgriffin@wm.edu.
   3. Adjust the Text to display field, if needed.
   4. Select the content_button custom format.
   5. Select Ok.
3. Submit the page, then review your content button.

How to Include a Subject Line for the Email

In the Link Source field, append it in the following format where the %20 represents a space between the words of the desired subject line: 

• mailto:tgriffin@wm.edu?subject=Add%20Subject%20Line%20Like%20This

Troubleshooting

Problem: The text of my button is cut off.

Buttons will not accommodate more than three lines of text. Edit the text of your button to a shorter length. Note: mobile devices have a narrower screen width, causing the text to wrap to additional lines sooner.

Problem: My button looks abnormally large or the colors look wrong.

If your button appears different than expected after applying the content button format, it's possible it was applied on top of another format. To reset the button's formats:

• Use your cursor to highlight the link/button.
• Select Format >> Clear formatting ().
• Then, reapply the content button format to the linked text using either of the methods, above.