Bastante Cool CSS botones biblioteca-botones

Vista prévia

Descripción

Buttons es una librería CSS/SASS que te permite incrustar más de 25 tipos de botones Web en tu documento HTML.

Funcionamiento

Importe los botones al proyecto o incluya directamente la hoja de stylehsheet principal en la página HTML.

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

Cree los botones en la página.

<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>

Reemplace los estilos CSS predeterminados en los archivos SCSS.

$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);