Create buttons

This tutorial will guide you through the creation of buttons like you see on the live demo site:

BUTTONS

Technically they are not buttons, but more of a text link made to look like buttons. Simple to make, we will just add some classes to a text link to achieve the buttons like the demo site displays.

Normally the most basic HTML text link looks like this:

Text Label

<a href="http://www.yourdomain.com">Text Label</a>

But we are going to turn that into a button that looks like this:

button default

All we need to do is make a text link in our content editor, then switch to the “Text” html view and add the class “btn” to the link like this:

<a class="btn" href="http://www.yourdomain.com">Text Label</a>

Button Sizes

With Influential, you get a few button sizes that you can use in your pages, posts, widgets, or even in custom forms.

button styles

All we need to do is add another class to our text link button based on the size you want. For the default button, you don’t have to do anything, but for the others, your classes are:

  • Large = btn-lg
  • Small = btn-sm
  • Extra Small = btn-xs

When you add a size to your text link, it will look like this example for a small button:

<a class="btn btn-sm" href="http://www.yourdomain.com">Text Label</a>