Pretty Cool CSS Buttons Library – Buttons

Preview:

Description:

Buttons is a CSS/SASS library that enables you to embed more than 25 types of web buttons into your html document.

How to use it:

Import the Buttons to your project or directly include the main stylehsheet in the html page.

<link rel="stylesheet" href="main.css">

Create the buttons on the page.

<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>
<button class="btn btn-tertiary">Button</button>
<button class="btn btn-tetrary">Button</button>

<button class="btn btn-black">Button</button>
<button class="btn btn-dark">Button</button>
<button class="btn btn-gray">Button</button>
<button class="btn btn-light">Button</button>

<button class="btn btn-primary btn-disabled" disabled>Disabled </button>
<button class="btn btn-light btn-disabled" disabled>Disabled </button>

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Regular</button>
<button class="btn btn-primary btn-md">Medium</button>
<button class="btn btn-primary btn-lg">Large</button>

Override the default CSS styles in the SCSS files.

$color-primary:                   #52C11F;
$color-secondary:                 #0B44EF;
$color-tertiary:                  #FF006A;
$color-tetrary:                   #991BE2;

$gray-lighter:                    #E6EAEF;
$gray-light:                      #CED0DB;
$gray:                            #6D6F7F;
$gray-dark:                       #3F4351;
$gray-darker:                     #252730;

$font-size:                       16px;
$font-family:                     'Booster Next FY', 'Avenir Next', Avenir, sans-serif;
$font-family-heading:             $font-family;
$line-height:                     1.42;

// Easings
$ease-in-cubic:                   cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-out-cubic:                  cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in-out-cubic:               cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-in-out-expo:                cubic-bezier(1, 0, 0, 1);
$ease-out-back:                   cubic-bezier(0.175, 0.885, 0.32, 1.275);
$ease-out-quint:                  cubic-bezier(.23,1,.32,1);