Overview

Version 1.2.0

Why reproduce similar code every time you need buttons or icons for a new project? Start with basic-buttons.less then customize to your needs. Over 200 icons are already included and the file is structured to make customization quick and easy.

Colors

To create a button add a .btn class. Then add the desired color preset .primary, .blue, etc.

Default Black White Red Yellow Green Blue Pink Orange Purple Teal Brown

Ghost Color Style

Add .ghost for an outline style

Default Black Red Yellow Green Blue Pink Orange Purple Teal Brown

Text Button

Text Button Another Button Blue Red

Sizes

Sizes available: default, .tiny, .medium, .large, .huge

Tiny Default Medium Large Huge

Icons

Add an icon to your button to spice things up .icon-cog.
You can use an icon without button text too.

Settings Delete Add User View Report

Use icon-rightside to flip the icon to the other side

Settings

Icons can also be added to any element.

See the `src/fontello/demo.html` for a complete list of 200+ icons.

Button Groups

Wrap buttons with a .btn-group span to create a unified group of buttons. Add class .active for a selected state.

Option 1 Option 2 Option 3 Option 4

<span class="btn-group">
    <a class="btn medium">Option 1</a>
    <a class="btn medium active">Option 2</a>
    <a class="btn medium">Option 3</a>
    <a class="btn medium">Option 4</a>
</span>

Pair with an icon to create a custom select box.

Select Select Select Select Select

Then use something like Dropdown to display the menu.

Variants

Use @btn-radius to set the default radius for all your buttons. Optionally, there is a .pill class already set.

Default Radius Pill Button

Customizing

Adding new colors is really easy with the provided mixin

&.newcolor	{ .color-btn(colorOfBtn, txtColor); }

Changing the provided colors can be easily done by modifying src/variables.less

@btn-color-red		: #c0392b;
@btn-color-green	: #27ae60;
@btn-color-sage		: #c6e59a;
@btn-color-blue		: #3498db;
...

License

MIT © Kevin Jantzer