Introduction

Simple Buttons is a kit packed with clean and easy-to-use buttons that you can use on any website. The kit comes pre-loaded with the wonderful Font Awesome font. By adding a class property to your a tag, you can convert any link to a functioning button. Best of all, the kit is created with classes that will not interfere with your overall website style, yet at the same time, easy to remember. The key features of this buttons are:

  1. Coded in CSS3
  2. Contains no images
  3. Responsive design
  4. Multiple colors, icons and sizes
  5. Amazingly low price
  6. Extended license available!

Quick Demo

NOW INCLUDES METRO BUTTONS!

Usability & Display

Simple buttons is named that for a reason; it is easy to use. To convert any link to a button, all you need to do is add the sb class to the a tag. So if you have a simple link such as this:

<a href="#">An Awesome Link</a>

Now just add class="sb" like so:

<a href="#" class="sb">An Awesome Link</a>

The bold text and color highlight is controlled by span tag. If you have a particular word you want to emphasize, simply surround the word with <span> tag. Furthermore, the kit comes with multiple highlight colors. You can add a highlight color by adding sb_[color] inside the class callout in a. It would look like this:

<a href="#" class="sb sb_darkorange">An <span>Awesome</span> Link</a>

If you want to add an icon in front of your button, you can do so by using the<i> tag. The icon can be placed anywhere you like. However, it is strongly recommended to use it before any text.

<a href="#" class="sb sb_darkorange"><i class="icon-link"></i>An <span>Awesome</span> Link</a>

By default, all buttons will display block. If you would like to display a button inline-block instead, simply add the class inline-block to the class property in the a tag like so:

<a href="#" class="sb sb_darkorange inline-block"><i class="icon-link"></i>An <span>Awesome</span> Link</a>

Similarly, you can also set the button to be in active state by default. Simply add the class active or current to the class property in the a tag like so:

<a href="#" class="sb sb_darkorange inline-block active"><i class="icon-link"></i>An <span>Awesome</span> Link</a>

To change the size of the button, you will need to adjust the font-size of the button itself. Don't worry, you don't need to do any CSS coding for this. We included a series of different font-size for you to use. The button size, the icon size and the font will all change in accorance with this simple change. To change the font-size, all you need to do is add the class to your a tag like so:

<a href="#" class="sb sb_darkorange inline-block active font-size-25"><i class="icon-link"></i>An <span>Awesome</span> Link</a>

Support

If you require any support, please post in the comment section or look in the “Thank You.pdf” file included in the archive.