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. When creating buttons, you can use the code in this tutorial or you can go to the original theme download package and inside a folder called “snippets” is a text file for your button code and styling that you can use.

Current button styles for Aberration Lite

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 white, 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 to your own personal choice by going to the theme customizer:

  1. Go to Appearance >> Customize >> Colours
  2. Find the Default Button settings and make your changes
  3. Click “Save & Publish“

NOTE This only works for the default button style.