Skip to content

Adding Buttons

You can add styled HTML buttons to Event Description pages and email messages to emphasize a link, call-to-action, or contact method. Buttons are added via the rich-text editor's Code View mode.

This is an advanced technique requiring HTML edits. If you're new to Code View, read Using the Rich-Text Editor first.

What this is for

A button stands out more than a plain link. Use buttons when you want an action to be visually unmistakable:

  • "Contact Us" — calls a phone or opens an email
  • "Visit Our Website" — opens an external page
  • "Download the Guide" — links to a hosted file
  • "Register for the Next Event" — links to a follow-up program

Step-by-step

  1. Open your Event in the Web App
  2. Navigate to the Summary menu
  3. Click into the description area where you want the button
  4. Open the "..." menu and switch to Code View (< >)
  5. Paste the HTML code (below)
  6. Replace placeholder values (URL, button text, color) with your own
  7. Switch back to the visual editor by clicking < > again
  8. Click the checkmark to save

Example: Contact Us button

The following code produces a blue button that opens a phone-dial link:

<p style="color: black; text-align: center; margin-left: 20px;">
  <a href="tel:1-800-555-1212"
     style="background-color: Blue;
            border: none;
            border-radius: 5px;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;"
     target="_self">
    <span style="font-size: 20px;">Contact Us</span>
  </a>
</p>

Copy this code into Code View, then customize:

  • The text inside <span> controls what the button label says
  • The href controls what happens when clicked (next section)
  • The colors and sizing are in the style attribute

The href attribute determines what the button does when clicked. Three common patterns:

Purpose href value
Phone number href="tel:1-800-555-1212"
Email address href="mailto:johndoe@example.com"
Web URL href="https://www.example.com/" rel="noreferrer" target="_blank"

For web URLs, add target="_blank" so the link opens in a new tab — keeping participants on your event page.

Changing the background color

The button's color is set by the background-color: value in the style attribute. You can use:

  • A named color (e.g., Blue, DarkOliveGreen, Crimson)
  • A HEX code (e.g., #2D63C8)
  • An RGB value (e.g., rgb(45, 99, 200))

For a list of valid color names and HEX codes, see the color references in Using the Rich-Text Editor.

If you change the background color, you may also want to adjust the text color for contrast. The text color is set by color: white; in the example above. Change to color: black; for buttons with light backgrounds.

A few additional style tips

  • Padding (padding: 15px 32px;) — controls the button's size. Increase for a bigger button, decrease for a smaller one.
  • Border radius (border-radius: 5px;) — controls how rounded the corners are. Set to 0 for square corners, or higher (e.g., 25px) for fully pill-shaped buttons.
  • Font size — controlled separately in the <span> inside the button. Adjust independently from the button's padding.
  • Alignment — the <p> wrapper has text-align: center; to center the button on the page. Change to left or right if needed.

See Also