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:
- Coded in CSS3
- Contains no images
- Uses the beautiful Font Awesome font
- Responsive design
- Multiple colors, icons and sizes
- Amazingly low price
- Extended license available!
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="#" <strong>class="sb"</strong>>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 <strong>sb_darkorange</strong>">An <strong><span>Awesome</span></strong> 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"><strong><i class="icon-link"></i></strong>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 <strong>inline-block</strong>"><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 <strong>active</strong>"><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 <strong>font-size-25</strong>"><i class="icon-link"></i>An <span>Awesome</span> Link</a>Credits
This kit uses the beautiful FontAwesome font. The font comes with its own terms that states:
The Font Awesome webfont, CSS , and LESS files are licensed under CC BY 3 .0. A mention of Font Awesome – http://fortawesome.github.com/Font-Awesome in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an ‘About’ or ‘Credits’ screen is considered acceptable (most common in desktop or mobile software).
Support
If you require any support, please post in the comment section or look in the “Thank You.pdf” file included in the archive.