Adding Buttons

 

Step by Step Instructions

You can always add hyperlinks to text within almost any WYSIWYG text field by following this guide but buttons are another design element that can add interest to your page and is a great way to draw attention to links and make navigation easy for viewers.

Some of these call-to-action (CTA) style buttons and arrow hyperlinks have already been built into page templates as styled links, but there is also the option to add a button component in snippets that do not already have a preloaded button or link. You can see examples of all of these on this style guide page. 

 

Editing built-in Buttons & Arrow Links

Many of the templates already include a call-to-action (CTA) button or arrow hyperlink within the page design, which have been styled into the page template design for consistency and clarity. Preserving the structure of built-in CTAs ensures your page stays visually consistent and easy to maintain across future updates. Both buttons and arrow hyperlinks serve as strong visual CTAs, but they have slightly different purposes. Use these buttons and arrow links built into templates when possible as they’re easier to edit and optimized for accessibility and design consistency.

 

When editing these pre-formatted elements:

  • Do not remove or replace them with custom styles outside of buttons and arrow links.

  • Avoid adjusting spacing. Everything is already created inside the designs so you don't have to do anything!

  • Simply update the text and link destination.

 

How to Edit Buttons and Arrow Links

  1. Place your cursor directly in the middle of the button or arrow link text (do not highlight or delete the text). 

  2. Click the link icon in the WYSIWYG toolbar to open the Insert/edit link editing window. with the button selected, use the Link icon in the WYSIWYG toolbar to Insert/edit linkediting the button link and style screenshot

  3. Update the link using the Source button to select a new dependency tag or enter an external URL.

  4. Update the “Text to display” space to change what the button or arrow link text.

  5. If needed, change the button’s color or style by selecting a new “Class” style:

    • Standard Link

    • Large Link

    • Small Link

    • Arrow Link

    • Yellow Button Link

    • Brown Button Link

    • White Button Link

Note: Stick to the default button styles inside your templates to preserve the intended visual hierarchy.

How to Remove Buttons and Arrow Links

  1. Place your cursor directly in the middle of the button or arrow link text (do not highlight or delete the text).

  2. Select the broken link icon in the WYSIWYG toolbar to remove the link and strip out the link styling (removes any residual HTML).Broken link icon in the WYSIWYG toolbar to remove link

  3. Delete the remaining text in the snippet where the button was.

 

 

add a button not already built-in

Use the Button component when you need to add a new button in areas without a preloaded one, such as longer One Column Text section. You’ll choose the color (Brown, Gold or Yellow,) link, and alignment using a simple form. While it may be tempting to add multiple buttons to a single content area, stick to one button per section. Adding multiples can clutter your design and confuse users.

 

How to Use the Button Component

The following options inside the button component can be added:

Button Style
Use the dropdown to choose from three branded styles:

  • Yellow (UW signature gold)

  • White (brown border)

  • Brown (UW’s signature dark brown)

Button Text
Enter the action-oriented phrase that will display on the button (e.g., “Apply Now,” “Learn More,” “Register”).

Button Link
Paste or use the file chooser to insert the external URL or internal dependency tag link for the button. This is where users will be directed when they click.

Button Link Target
Choose whether the link should open in:

  • Same Tab (recommended for internal UW pages)

  • New Tab (recommended for external sites or documents)

Button Alignment
Decide how the button should be aligned within its content block:

  • Left

  • Right

  • Center

Once all fields are complete, click Save to apply your changes.