Basic Buttons

A starter for buttons and icons within your project.

Button Select


Version 1.1.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.

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

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

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


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

Default Primary Secondary Red Yellow Green Blue Sage Orange Purple Gold Teal Volt

Ghost Color Style

Add .ghost for the following result.

Primary Secondary Red Yellow Green Blue Sage Orange Purple Gold Teal Volt


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 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 Audio Inc.