Call to Action Buttons

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

Ask for Assistance


Call to action buttons are button links we use strategically to draw attention to the primary action we want users to take on a page.

Getting Started Tips

  • Use buttons only for important actions you want users to take on your site, such as "Join Our Email List" or "Report a Concern".
  • Never use buttons as anchor/jump links for content on the same page. Use a resource listing or bullet list instead.
  • "Submit" and "Delete" buttons should only be used once per page.
  • Avoid using too many buttons on a page.
  • Title Case is most commonly used in buttons. Use UPPERCASE sparingly because can be viewed as shouting.
  • Make the first word of the button a verb if possible—show the action you want the user to take. Use "File a Complaint" instead of "Complaint Filing."

Add a Call to Action Button

To add a call to action button to your content, place your cursor in the spot where you want the button to be and click the UO Edit Suite Templates icon. (Visit the Drupal Content Editor page to learn about the editor toolbar.)

the Drupal content editor toolbar with a red rectangle around the templates icon

This will bring up the Insert Template pop-up window.

Buttons can be used on their own, or you can insert a grid first, and then add a button to each grid item.

To add a Call to Action Button, select the option labeled "Call to Action Button" in the top row. Then click the "Select Call to Action Button Options" button.

adding a Call to Action Button in the Drupal content editor

At the moment, there is only one Call to Action Button style.

Select the Call to Action Button style and then click the "Insert Template" button.

inserting a Call to Action Button template in the Drupal content editor

A standard call to action button will be inserted into your page, like the example below.

example of a default Call to Action Button in the Drupal content editor

Edit the Button Text

Highlight the default "Call to Action Button" text.

highlighting the call to action button text in the Drupal content editor

Type in your new button link text. In this example, we will use "Schedule an Appointment" as our button link text.

changing the button text to "Schedule an Appointment" in the Drupal content editor

NOTE: There is a bug in the current version of Edit Suite. When editing a button, another button may appear to the side of the button you are creating.

If this happens, ignore the new button and click in the area below your button. The new button should disappear. 

example of extra button created as the result of a bug in the content editor
example showing how clicking below a button removes the extra button in the content editor

Click on the text in your button, then click the pencil icon to begin editing the button link.

the call to action button Edit Link icon in the Drupal content editor

Paste or type the destination URL into the Link URL field. Click the Save button, which features a green check mark.

example showing a URL added to a call to action button and the save button

NOTE: Clicking on the Unlink icon is not recommended. Doing so will remove the button, leaving your link text as plain text on the page. If you want to remove an existing link but keep your button intact, click on the pencil icon to edit the link.

a red X through the Unlink icon on the call to action button editor

Edit Button Styles

Right-click the button you have created and click "Edit Call to Action Button" to begin editing the button.

example showing to right-click and select Edit Call to Action Button in the content editor

A Call To Action Button editing menu will open on the left side of the page, offering the following editing options: Style, Modifiers, Delete All, and Insert Paragraph

Here is an example of the Call to Action Button editing menu on the left, with the button on the right:

the Call to Action Button editing menu on the left with a button on the right

Style

Click on the Style option, then click "Call to Action Button" to open the menu. 

The style options are Standard Button, Submit Button, and Delete Button.

Do not create new button colors. Call to Action buttons are carefully formatted to respond to background colors and templates to meet accessibility, functionality, and UO brand requirements.

  • "Standard Button" is the default style and should be used most of the time.

  • "Submit Button" is a green button style that should be used sparingly for a primary page action like submitting, applying, or donating.

  • "Delete Button" is a red button that should be used only for destructive actions like "Delete Account."
the Call to Action Button Style menu in the Drupal content editor

Button Modifiers

The only modifier available for buttons is the option to use all uppercase text, rather than the standard title case.

Click "Call to Action Button" under Modifiers, and then click the "Uppercase Text" button to toggle uppercase on and off. 

uppercase text option for buttons in the Drupal content editor

Title case is most commonly used in buttons. Use UPPERCASE sparingly because can be viewed as shouting.


Delete All

The Delete All section of the Call to Action Button edit menu allows you to delete the button fully from the page.

Click "Call to Action Button" and mouse over the "Delete All" button. The button you are about to delete is highlighted in red. Click to delete the button.

the button editor menu showing how to use Delete All to remove a button

You may be able to recover your deleted button if needed by clicking the Undo icon in the editor toolbar.


Insert Paragraph

To insert an empty paragraph above or below a call to action button, click on the

the Insert Paragaph section in the button editor menu

Back to Top