This light-weight* css module is a set of simple utilities you can use to create a variety of button style links. Easily customize or extend btns.css to fit your sites styles.
* 663B gzipped and minified.The default button
<a href="#" class="btn">A Button<a>
A Button
Button Sizes
By default the base button class does not declare a font-size, so it is naturally set to 1em.
Extensions to the .btn class are available for an additional three sizes: small, medium, and large.
If you'd like to extend or customize the size of the buttons, it's incredibly easy. Just apply a new font-size to the button and watch it shrink/grow.
<a href="#" class="btn btn--l">A Button<a>
<a href="#" class="btn">A Button<a>
<a href="#" class="btn btn--m">A Button<a>
<a href="#" class="btn btn--s">A Button<a>
Button Skins
Black & White
<a href="#" class="btn btn--m btn--black">A button link</a>
<a href="#" class="btn btn--m btn--white">A button link</a>
A button link
View on github
Download .zip
Sign Up ▸
The grays
<a href="#" class="btn btn--m btn--gray">A button link</a>
<a href="#" class="btn btn--m btn--gray-dark">A button link</a>
<a href="#" class="btn btn--m btn--gray-border">A button link</a>
The blues
<a href="#" class="btn btn--m btn--blue">A button link</a>
A button link
View on github
Download a .zip
View more ▸
Block buttons
Avoid having buttons that are obscenely large on tablets and desktop with the .btn--full extension.
Centered, full-width on mobile, with a max-width of 16em on larger screens.
Save Submit Cancel Sign Up