Site Bytes - Call to Action Buttons

Site Bytes - Call to Action Buttons
Site Bytes - Call to Action Buttons

A call to action button can help your users find what action they are supposed to take on a page. For example, an article about an upcoming event may have a button promting folks to register for the event.

To create a call to action button, we'll need to edit the HTML of a link.

▶Watch video: "IANR Help Session: HTML Basics" (30:35)

Create a link like you normally would in the editor by highlighting the text you would like to be a link, selecting 'Insert/Edit Link' from the toolbar, and providing the URL you would like the link to point to. Next, change the editor from 'WYSIWYG' to 'HTML', using the 'Editor' dropdown below the editor.

Your link should appear in the HTML as something like this:
<a href="sample.com">Register</a>

We can see the code to start the link and tell the link where to point: <a href="sample.com">
Then, the text for the link: Register
Finally, code to tell the computer the link is done: </a>

To make the link a button, add 'class="dcf-btn dcf-btn-primary"' to the code before the text of the link. This tells the browser to make the link look like a button instead of a normal link. It will have a red background with white text instead of underlined red text. The code should look like this:

<a href="sample.com" class="dcf-btn dcf-btn-primary">Register</a>

Pro tips:
Buttons work best with few words and separate from the text of a paragraph. When you are editing code, be sure to keep all spaces, quotation marks, equals signs and angled brackets in order like the example above. If something is out of place, it may mess up your button.