Basic Buttons

A starter for buttons and icons within your project.

Button Select


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.

Button    <a class="btn black">Button</a>

Button    <a class="btn icon-cog black">Button</a>

   <span class="btn transparent icon-cog icon-only"></span>

   <span class="icon-cog"></span>


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 available: default, .tiny, .medium, .large, .huge

Tiny Default Medium Large Huge


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


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>

Pair with an icon to create a custom select box.

Select Select Select Select Select

Then use something like Dropdown to display the menu.


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

Default Radius Pill Button


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;


MIT © Kevin Jantzer

Built by Kevin Jantzer, Blackstone Publishing