Harper College

Buttons

Button snippets create small colored boxes that contain linked text. Buttons are used for calls to action, such as "Register" or "Apply". Avoid using buttons to link to informational pages or articles (use the Tile component instead).

How to create a button

  1. Place the cursor on your page where you want the button to appear.
  2. Click on the Snippet icon in your tool bar (it looks like a puzzle piece), then choose a Button snippet.
  3. Edit the button text and link by highlighting the text clicking on the link icon in the toolbar. Enter the URL in the pop-up that appears and fill in other details as needed. Click Save.

Example

Button (default): Use this for most calls to action; can be used anywhere.

Advanced usage notes

  • For any part of the button to be clickable, the <a> element must surround the <button> element. If the order is reversed, as it is in many places across the site, only the text will be clickable.
  • Because <a> elements and <button> elements are by default part of the tab index, the <button> element should be removed from the tab index by adding the tabindex="-1" attribute. If the tabindex removal is on the <a> element, a keyboard user will not be able to click the link.
Last Updated: 2/3/26