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 the button links you use in your website to guide your users toward the top thing you want them to click on that page.

Getting Started Tips

  • Buttons can be used on their own or combined as part of a grid. Add the grid first, then add the buttons in each grid item.
  • Use buttons for only the most important actions you want users to take on your site, such as "download" or "sign up."
  • Only use buttons to link to other pages. Never use buttons as anchor / jumps links for content on the same page.
  • "Submit" and "Delete" buttons should only be used once per page.

Guidance

  • Avoid using too many buttons on a page. If you need to show more than 3 links, we suggest using a resource listing.
  • Be consistent in the capitalization — UPPERCASE, Title Case, or Sentence case — for all of your buttons.
  • 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 Call to Action Buttons

To add a call to action button to your content, place your cursor in the spot where you want the new call to action button to be and click the template icon:

 

CKEditor menu bar templates

This will bring up the Add Templates pop-up window on the Content Templates tab. Choose the second option on the left labeled "Call to Action Button."

 

Highlighted call to action button

Click the Insert Template button at the bottom right and it will automatically insert a new Call to Action button.

 

Call to Action Button default

Highlight all of the existing "CALL TO ACTION BUTTON" text and type in your new button link text. Click anywhere in the text, then select the link to content button in the Drupal content editor to add your link to the button.


Button Styles

Buttons are automatically defaulted to be button-standard. You can modify the style by clicking on the pink paint palette icon in the upper left of the button and selecting one of the button styles.

 

Call to action button options

Select either the Standard, Submit, or Delete options, show below.

The “Submit” button will appear green. It should only be used once per page and only for things like "Apply," "Donate," "Submit, " or the primary action on the page.The “Delete” button will appear red. It should only be used once per page and only for destructive actions such as "Delete Account," "Wipe Data," etc.

Light background:

Dark background:


Button Modifiers

Buttons are automatically defaulted to be in all caps. You can modify the button text case by clicking on the yellow wheel in the upper left hand corner of the button and selecting the lowercase option from the modifiers button.

 

Call to Action Button modifiers

Button Alignment

Buttons can now be aligned to the left, center, and right by using the "align left," "align center," and "align right" buttons in the Drupal Content Editor. Just click in the text area of the button and click on the alignment you want.