The CTA button prompts your visitors to take action by making common actions more visible and easy to perform with one click or tap. CTA buttons are labeled using text or text and an accompanying icon.
<a class="c-buttoncta" href="http://www.nooooooooooooooo.com">Join the darkside</a>
👻 Ghost CTA button
For secondary or tertiary CTAs, consider using a use ghost button modifier.
<a class="c-buttoncta c-buttoncta--ghost" href="https://en.wikipedia.org/wiki/Stay_Puft_Marshmallow_Man">Stay Puft</a>
CTA button with icon
To make your CTA button easier to scan, consider adding an RDS icon. Position icons before (left of) the accompanying label.
<a class="c-buttoncta u-icon" href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.8 9.6V0H7.2v9.6H0L12 24 24 9.6z"/></svg>Download our free ebook</a>
Notice the use of the u-icon class.
Implementation Notes
Links vs buttons
Most CTA button classes are designed to redirect off of the current page using the <a> element. If this is the case, do NOT use the <button> element for CTA buttons.
😎 Cool:
<!-- Cool, like Fonzie -->
<a class="c-buttoncta" href="/contact">Visit our contact page</a>
👎 Not cool:
<!-- Fonzie jumping a shark -->
<button class="c-buttoncta"><a href="/contact">Visit our contact page</a></button>
Using <button>
You can use a <button element for a CTA, if you are performing actions such as:
- Opening a modal window
- Triggering a popup menu
- Toggling an interface
- Playing media content
- Inserting with JS if they only work with JS
The following code is okay to open a modal:
<button class="c-buttoncta">View Terms</button>
Important: CTA button components should NOT be used to submit forms. Form buttons have a purposely distinctive style setup by default in RDS. As seen below:
😎 Cool:
<form>
<input type="submit">
</form>
👎 Not cool:
<!-- Fonzie jumping a shark -->
<form>
<input class="c-buttoncta" type="submit">
</form>
<!-- more shark jumping -->
<button class="c-buttoncta">Submit form</button>
Full-width buttons
To provide more prominence, apply the modifier c-buttoncta--full and the button will stretch to fill 100% of the available width.
<a class="c-buttoncta c-buttoncta--full c-buttoncta--ghost u-icon" href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 14H14v10h-4V14H0v-4h10V0h4v10h10z"></path></svg>
Add to calendar</a>
Important: in the example above the space is too wide to apply the full-width button modifier. It should only be used in small width layout areas, such as sidebars,
Centering
To center a button, add the modifier class c-buttoncta--center.
<a class="c-buttoncta c-buttoncta--center u-icon" href="/ebook.pdf"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.8 9.6V0H7.2v9.6H0L12 24 24 9.6z"/></svg>
Download our free ebook</a>
Found in
Badges are used in the following blocks:
Usage guidelines
Ghost button usage
Ghost buttons have proven to be less effective then our default solid buttons. While Ghost Buttons have their place in web design, they should be used less frequently and in the right context.
Ghost buttons should:
- be used as secondary call-to-actions.
- Should only be used on solid white backgrounds. If placed over a busy image without sufficient contrast, it can be difficult for users to read the button's text.
Further guidelines
CTA Buttons should:
- Begin with an action verb like “Start”, “Get” or “Download”
- Communicate the action that will occur when the user touches them.
- Be used as calls to action (cta).
- Be clearly and accurately labeled and start with strong, actionable verbs.
- Be brief: A couple of words is best, no more than five is ideal
- Be used for the most important actions on a page.
- Fall on their own line and have a good amount of white space surrounding them.
Examples of buttons with good calls to action:
Register for WordCamp Ottawa 2018
Avoid
- Don't use buttons for standard links within text such as this.
- Avoid using Ghost buttons for main actions.