• Stars
    star
    191
  • Rank 202,933 (Top 4 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A collection of CSS buttons.

Buttons

A collection of CSS buttons.

Live demo.

About This Project

My goal was to create a variety of stylish buttons for the web, using minimal markup while taking advantage of the HTML5/CSS3 technologies.

The collection includes 26 different button styles.

Technical Details

Each style has been generated via a component-based system, using SASS (a CSS preprocessor). The process is designed to make it easy and simple to create a new set of button styles in a modular fashion.

Ultimately, the markup is the same for each set of button style:

<button class="btn btn-primary">Button</button>

where class .btn is the generic component class and .btn-primary is the style-specific class.

Leveraging the power of SASS mixins, each style is generated simply by taking a color as an input. For the alpha style, it looks like this:

// Assuming the color variable has been declared, like so:
// $color-primary: #7AD84E
.btn-primary { @include btn-alpha($color-primary); }

How To DIY (Develop It Yourself)

The project comes with a simple Grunt setup to compile the SCSS to the main.css found in root (but feel free to use your own tools). Requires Node.js and the grunt-cli. Pretty standard these days.

Setup

npm i -g grunt-cli # install the grunt-cli
npm i # install local packages

Build

grunt # build those stylesheets

Development: Watch & Rebuild

grunt dev

Final Thoughts

Like any bit of UI, buttons should never be dull. Attention to detail is key in a design with sensibiilty.

Say hello, share your ideas or send me your thoughts to louis at loupbrun dot ca.

Elsewhere On The Web

I’m trying to backtrack articles on the web that refer to this project.

License

MIT