Stylish Button & Button Group CSS Library

Preview:

Description:

A CSS/SCSS library that provides an easy way to insert stylish and customizable buttons and button groups into your web project.

How to use it:

1. Download and import the not-another-button-component.css stylesheet.

<link rel="stylesheet" href="dist/not-another-button-component.css">

2. Just add the CSS class ‘btn‘ to the links and the library will do the rest.

<a href="#" class="btn" role="button">
  Default
</a>

3. The library currently comes with 6 themes:

<a href="#" class="btn btn-primary" role="button">Primary</a>
<a href="#" class="btn btn-secondary" role="button">Secondary</a>
<a href="#" class="btn btn-outline" role="button">Outline</a>
<a href="#" class="btn btn-success" role="button">Success</a>
<a href="#" class="btn btn-warning" role="button">Warning</a>
<a href="#" class="btn btn-error" role="button">Error</a>

4. Adjust the size of the buttons.

<a href="#" class="btn small" role="button">Small Button</a>
<a href="#" class="btn large" role="button">Large Button</a>

5. Add a loading indicator to the buttons.

<a href="#" class="btn loading" role="button">
  Loading Button
</a>

6. Set the border-radius of the buttons.

<a href="#" class="btn radius-none" role="button">No Radius</a>
<a href="#" class="btn radius-small" role="button">Small Radius</a>
<a href="#" class="btn radius-large" role="button">Large Radius</a>
<a href="#" class="btn radius-circle" role="button">Circle Button</a>

7. Create vertical & horizontal button groups.

<div class="btn-group btn-group-horizontal">
  <a href="#" class="btn" role="button">Default</a>
  <a href="#" class="btn btn-primary" role="button">Primary</a>
  <a href="#" class="btn btn-secondary" role="button">Secondary</a>
  <a href="#" class="btn btn-outline" role="button">Outline</a>
  <a href="#" class="btn btn-success" role="button">Success</a>
  <a href="#" class="btn btn-warning" role="button">Warning</a>
  <a href="#" class="btn btn-error" role="button">Error</a>
</div>

<div class="btn-group btn-group-vertical">
  <a href="#" class="btn" role="button">Default</a>
  <a href="#" class="btn btn-primary" role="button">Primary</a>
  <a href="#" class="btn btn-secondary" role="button">Secondary</a>
  <a href="#" class="btn btn-outline" role="button">Outline</a>
  <a href="#" class="btn btn-success" role="button">Success</a>
  <a href="#" class="btn btn-warning" role="button">Warning</a>
  <a href="#" class="btn btn-error" role="button">Error</a>
</div>