Bttn.css – Awesome CSS Buttons Under 4Kb

By Jake Rocheleau. in Toolkit. Updated on July 16, 2019.

With so many free CSS snippets and code generators, there’s no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple page elements such as navigation menus and buttons.

One such library is Bttn.css, created by developer Ganapati V S. His work is exquisite and this button library is one of the best for modern frontend development.

On the buttons homepage, you can select between extra small, small, medium, and large sizes, along with various color schemes. The buttons come pre-built and ready to go, so all you need is the actual CSS library and the right classes for your buttons.

btncss

You can download the library from GitHub or you can use the CDN version for local testing. It even works in cloud IDEs such as CodePen if you wanna give it a go in your browser.

Bttn.css is actually a smaller library, offering about 13 different styles. Some of these include material styles, gradients, ghost buttons, and the traditional pill buttons using CSS3 rounded borders.

Note this library is similar to the Butns library in using a shortened spelling of “buttons” and pure CSS code.

However, Bttn.css offers varying styles of buttons, rather than one large library of similar elements. This is one reason I recommend Bttn.css for pretty much any web project—out of all 13 styles, you’re bound to find something that fits.

You can read more in this Medium post, penned by the creator of Bttn.css. He explains why he made the library and what purpose it serves in a typical development project.

If you’re looking for more complete documentation take a peek at the GitHub repo. It lists all the CSS classes for styles, sizes, and colors, along with install details using the CDN or a package manager such as Bower.

Be sure to also check out the demo page to see what this library can do. And feel free to share your thoughts with the creator on his Twitter @ganapativs.