Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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.


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


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.