Hey, You! Click That CTA Button!

In our digital world, website users are often assaulted by an array of visual cues on a daily basis. They may have hurdles like chat pop-ups and video pops-ups just to  find what they were looking for in the first place.

Often, we spend so much time creating purposeful content and design elements to guide our users, that we may forget to discuss one of the most important elements  — the Call To Action (or CTA). Depending on your goal, you want to ensure that your users are prompted to complete the actions you’ve created on landing pages; you know, the actions that lead to conversions.

Below are a few simple steps and helpful HTML hints, or helper classes, that you can use on your website to help create CTAs.

Creating a Button

Buttons can be created in two ways. You can create it as a “a link” or as a “button element”.

<a class=”btn” role=”button” href=”#”>Link</a>
<button class=”btn” type=”submit”>Button</button>

Button Formation

Using the “btn” class creates the shape and formation.

Button Colours

We can further expand that by adding a colour class “btn-primary” to the button. Similarly you can add different colors based on the other classes.
EX: btn-secondary, btn-dark

<button class=”btn btn-primary” type=”button”>Primary</button>
<button class=”btn btn-secondary” type=”button”>Secondary</button>
<button class=”btn btn-success” type=”button”>Success</button>
<button class=”btn btn-danger” type=”button”>Danger</button>
<button class=”btn btn-warning” type=”button”>Warning</button>
<button class=”btn btn-info” type=”button”>Info</button>
<button class=”btn btn-light” type=”button”>Light</button>
<button class=”btn btn-dark” type=”button”>Dark</button>

Button Sizes

There are two options we can use when creating a button, and they’re pretty straightforward; we have the large button class “btn-lg”, and the small button class “btn-sm”.

<button class=”btn btn-primary btn-lg” type=”button”>Large button</button>
<button class=”btn btn-secondary btn-sm” type=”button”>Small button</button>

Full Width Button

For when you want to bludgeon your site’s visitors over the head with your CTA, you can create a button that expands across your entire page with the “btn-block” class.

<button class=”btn btn-primary btn-lg btn-block” type=”button”>Block level button</button>

For those interested in learning more about helper classes, or the bootstrap framework we use on our platform, you can visit Bootstrap 4 and W3Schools. Of course, Strathcom also offers multiple webinars every month going over our CMS, from beginner to expert, and we are happy to answer any questions you may have at the time. As always, thanks for reading our blog, and stay tuned for more exciting automotive and design news.