A collection of CSS buttons.
MIT License
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); }
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
grunt dev
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
.
Im trying to backtrack articles on the web that refer to this project.
A collection of interesting button styles by Louis-Olivier Brassard.
The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include the slightly-glassy Delta, the fun and sassy Theta, the roomy and minimal Mu and keyboard-like Phi. Be sure to check out the ultra-cool click effects in the demo.
Get outstanding CSS buttons here [points to my website]
This collection of CSS buttons is so chockfull of personality, you might not be able to pull your gaze away (or your visitors!). Theyve included such a diverse range of button styles and animations that you could realistically use this pack of buttons for use across multiple client sites and no one would be the wiser. This collection would also come in handy for A/B testing CTAs as well as tackling future rebrand projects that dont need to deviate too far from the baseline design.