Create buttons and customize the colour

This will be a simple tutorial to help you make any text link as a button, including adding styling attributes such as colour and size.

Current button styles for Senses are:

The default buttons are displayed second from the top down, and the default colour is the grey buttons you see.

Create a Default Button

  1. Make a normal text link
  2. Switch your editor to the “Text” view so that you can see the HTML source code like this example:
    <a href="/yourlink.com">My Link</a>
  3. Add the class “btn” to the link code like this:
    <a class="btn" href="/yourlink.com">My Link</a>

Create a Large Button

  1. Make a normal text link
  2. Switch your editor to the “Text” view so that you can see the HTML source code like this example:
    <a href="/yourlink.com">My Link</a>
  3. Add the class “btn btn-lg” to the link code like this:
    <a class="btn btn-lg" href="/yourlink.com">My Link</a>

Create a Small Button

  1. Make a normal text link
  2. Switch your editor to the “Text” view so that you can see the HTML source code like this example:
    <a href="/yourlink.com">My Link</a>
  3. Add the class “btn btn-sm” to the link code like this:
    <a class="btn btn-sm" href="/yourlink.com">My Link</a>

Create a Extra Small Button

  1. Make a normal text link
  2. Switch your editor to the “Text” view so that you can see the HTML source code like this example:
    <a href="/yourlink.com">My Link</a>
  3. Add the class “btn btn-xs” to the link code like this:
    <a class="btn btn-xs" href="/yourlink.com">My Link</a>

Use the Dark Button Style

Adding colour to your button is done by adding another class to the link code. Your default button colour is green, but you also have the choice to use the “dark” style.

  1. Make a normal text link
  2. Switch your editor to the “Text” view so that you can see the HTML source code like this example:
    <a href="/yourlink.com">My Link</a>
  3. Add the class “btn dark” to the link code like this:
    <a class="btn dark" href="/yourlink.com">My Link</a>

If You Don’t Like the Default Button Colour…

With this theme, you get the option to change the default button colour of green to your own personal choice by going to the theme customizer. You get the following settings:

NOTE This only works for the default button style.