A collection of CSS buttons.
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.
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); }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.