Jump to HeaderJump to Main ContentJump to Footer
Michigan State University
Michigan State University
Digital Experience Studio

University Communications and Marketing

Digital Experience Studio

  • Experience Program
    • Website Project Process
    • Working with a Vendor
    • Glossary
    • Taxonomy Data Dictionary
  • |
  • Experience Design
    • Website Strategy
    • Website Structure
    • Information Architecture and Navigation
    • User-Centered Design Conventions
    • Common UX Issues
    • Enterprise Design System
    • Content Planning
    • Creating Accessible Content
    • Taxonomy and Filters
  • |
  • Website Technology
    • Web Standards
    • Search Engine Optimization
    • Cascade CMS
    • Sitecore CMS
    • Content Hub Overview
    • Content Hub DAM
    • Content Hub Operations

    SitecoreAI

    Sitecore user login
  • |
  • Social Media
    • Alt Text Bookmarklet
    • Meta Ad Pixel
    • Social Media and Web Integration
    • Sprinklr

    Sprinklr

    Sprinklr user login
  • |
  • Analytics
    • Google Analytics (GA4)
    • Testing
    • Data Visualization

    Google Analytics

    Google Analytics user login
  • |
  • News and Events
    • News and Updates
    • Events and Trainings
Digital Experience Studio

University Communications and Marketing

  • Experience Program
  • Experience Design
  • Website Technology
  • Social Media
  • Analytics
  • News and Events

< Experience Program

  • Website Project Process
  • Working with a Vendor
  • Glossary
  • Taxonomy Data Dictionary

< Experience Design

  • Website Strategy
  • Website Structure
  • Information Architecture and Navigation
  • User-Centered Design Conventions
  • Common UX Issues
  • Enterprise Design System
  • Content Planning
  • Creating Accessible Content
  • Taxonomy and Filters

< Website Technology

  • Web Standards
  • Search Engine Optimization
  • Cascade CMS
  • Sitecore CMS
  • Content Hub Overview
  • Content Hub DAM
  • Content Hub Operations

SitecoreAI

Sitecore user login

< Social Media

  • Alt Text Bookmarklet
  • Meta Ad Pixel
  • Social Media and Web Integration
  • Sprinklr

Sprinklr

Sprinklr user login

< Analytics

  • Google Analytics (GA4)
  • Testing
  • Data Visualization

Google Analytics

Google Analytics user login

< News and Events

  • News and Updates
  • Events and Trainings
Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore Component Guide >

CTA Button

MSU Tools and Resources

  • A to Z Index
  • Find People
  • Email
  • Tech Support
  • Social Media Directory

Communications Resources

  • University Communications and Marketing
  • University Trademarks and Licensing
  • MSU Brand Studio
  • MSU Editorial Style Guide
  • MSU Photos

Contact us

517-355-7505

Address

Michigan State University 408 West Circle Drive East Lansing, MI 48824

Follow Us

  • Visit our Facebook page
  • Visit our page on X
  • Visit our Instagram page
  • Visit our LinkedIn page
  • Visit our YouTube page
  • Visit our TikTok page

If you're having accessibility issues, please let us know.

Know MoreTransparency Reporting: Budget & Salary/Compensation
  • Contact Information|
  • Site Map|
  • Privacy Statement|
  • Site Accessibility|
  • Call MSU: (517) 355-1855|
  • Visit: msu.edu|
  • Notice of Nondiscrimination|

SPARTANS WILL|© Michigan State University|

CTA Button

The CTA Button component allows content authors to add one or more CTA buttons to main content areas between other components. This component may also be used in the right column of the two-thirds sublayout and in some of the container components. Multiple CTA buttons display in a row as space allows and will then stack vertically.

Screenshot of three green CTA buttons with white text reading: Learn More, MSU Home and XMC Component Guide
Figure 1: Example of a CTA Button component with three CTA buttons.

Component Information

  • Usage

    • Benefits

    • The CTA Button component adds one or more CTA buttons in between other components.
    • The component is usable in the main body area of a page and in both columns of a two-thirds sublayout.
    • The CTA Button component may also be used inside some of the other container components (i.e., accordion, side tabs and tabs).
    • This component is useful for giving a link more presence by making it a CTA button.

    Live Example

    • Demo: Information-Focused Content Components

    Frequently Asked Questions

    Can I change the color of the button?

    No, the button is designed to appear green with white text. 

    Instructions for Use

    Add a CTA Button to a Page

    In Page Builder:

    1. Select the page in the site tree.
    2. Click the “+” button in the placeholder for the CTA Button.
    3. Select CTA Button component from the list.

    Alternate method: 

    1. Select the page in the site tree.
    2. Click the Components tab at top of the left pane.
    3. Locate the CTA Button component.
    4. Drag the CTA Button component to placeholder on the page.

    Tool Use Guide

     

    Documentation updated: May 28, 2026

    Is there an issue with this documentation? Report it here.

  • Expected Behavior
    • Multiple CTA buttons display in a row as space allows and will then stack vertically on mobile views or when the line wraps due to limited browser window width.
    • The CTA Button component displays the CTA buttons in a row from left to right as they are added.
    • When there isn't enough horizontal space to accommodate all buttons, the CTA buttons will stack top to bottom.
    • The width of the CTA buttons varies with the length of the text. Stacked buttons will have varying widths.
  • Best Practices

    • Component Options and Limitations

    • CTA Button links have the same link options as CTA buttons built into other components.
    • The CTA Button component will only display the primary green CTA button style.
    • Setting file and email links currently works best in Content Editor.

    Guidelines

    • When using multiple CTA Button links, it is best to use the component in a space wide enough to display the buttons in one row. Limiting content to three or four links usually works well.
    • When using the CTA Button component in a narrow space, limit it to one CTA link for best results.
  • Template Data

    • Component Options — Page Builder only:

    Manage Items
    • Add new CTA

    Page Builder — Link Element with Standard Link Options:

    Link type (drop-down menu)
    • Options:
      • External
      • Internal
      • Media (currently not working in Pages)
      • Email
    Link text (single-line text)
    • This text displays as the link.
    • This is the same as “Link: Description” in Content Editor.
    • Click the "+" icon above the Link text box to add a Link tooltip field.
    Path (general link)
    • This is a URL field with Browse button to identify the page the link will direct visitors to visit upon clicking.
    Optional parameters
    • After adding a URL to the link field, click the "+" icon above the path to open an options menu to add an anchor or a URL query string.
    • Contact Comms.WebSupport@msu.edu with questions.
    Open in new window (checkbox)
    • If the link should open in a new browser window, check this box. 
    Clear link value (button)
    • Click this button to reset the component link field.

    Content Editor:

    Link (general link)
    • Insert link field with standard link options.
    • This is the best method to add/edit Media links.
    Description (single-line text)
    • Located in the Link Details.
    • The text here will display for the link, in either text form or in the button (depending on component settings).
    Can I include more than one CTA Button on a page or in a page section?

    Yes. Content authors should keep browser window size and user experience in mind when adding multiple CTA Buttons. 

    Connect the CTA Button to an Internal Link

    In Page Builder:

    1. Click on the CTA Button text field. “No text in field” appears by default.
    2. In the Element Options pane on the right side, select Internal from the Link type icon menu.
    3. Enter a link path from within the site or click Browse to open the link selection window. Choose the page to be linked and click Add link to select.
    4. Enter the link button label in the Link text box.
    5. Optional: Add tooltip text in the Link title text box. 
    Connect the CTA Button to an External Link
    1. Click on the CTA Button text field. “No text in field” appears by default.
    2. In the Element Options pane on the right side, select External from the Link type icon menu.
    3. Enter a full URL in the URL text box.
    4. Enter the link button label in the Link text box.
    5. Optional: Add tooltip text in the Link title text box. 
    Connect the CTA Button to an Email Address
    1. Click on the CTA Button text field. “No text in field” appears by default.
    2. In the Element Options pane on the right side, select Email from the Link type icon menu.
    3. Enter a full URL in the URL text box.
    4. Enter the link button label in the Link text box.
    5. Optional: Add tooltip text in the Link title text box. 
    Connect the CTA Button to a Media File
    1. Click on the CTA Button text field. “No text in field” appears by default.
    2. In the Element Options pane on the right side, select Media from the Link type icon menu.
    3. Use the Path icon to open the Add Media window.
    4. Navigate in the Media Library to locate the desired file. 
    Note: If the desired file does not display in Page Builder, it may be a file type not supported by Page Builder. Try to set the media link in Content Editor. 
    1. Select the file and click Add selected to choose the file.
    2. Enter the link button label in the Link text box.
    3. Optional: Check the Open in new window option to have the file open in a new browser window/tab.
    Alternative: Add or Edit Links in Content Editor
    1. Open Content Editor:
      1. In Page Builder, click the drop-down arrow to the right of the SitecoreAI icon in upper left.
      2. Select Content Editor. It opens in a new browser tab.
    2. If the CTA Button does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
      1. In the Content Tree, expand Content > MSU > site name > Home > page name > Data.
      2. Locate and expand the CTA Button component.
      3. Click on the CTA Button component in the Content Tree.
    3. Edit the link:
      1. Click the appropriate link option under the Link panel.
      2. Complete the link field settings, as needed.
      3. Add the button label in the Link Description box.
      4. Click Insert button.