Create Buttons from text links and change 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 Opportune are:

buttons

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>

Add a Colour to your Button

Adding colour to your button is done by adding another class to the link code. You get 4 colour options of: Tan, Green, White, and then default is Grey, but you do not need to add “grey” to your button because it does it automatically.

  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 tan” to the link code like this:
    <a class="btn tan" href="/yourlink.com">My Link</a>

If You Don’t Like the Colour…

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

button colour setting

NOTE This only works for the default button, not the ones that get the colour classes added, tan, green, or white.