Author: | loup-brun |
---|---|
Views Total: | 2,100 views |
Official Page: | Go to website |
Last Update: | May 13, 2017 |
License: | MIT |
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);
very beautiful buttons .. unfortunately they’re bugging a bit on my samsung galaxy s7
(the button is shifting a few pixels to top on release)