Ioanni Mitsakis January 16th, 2017

CSS: Pretty Buttons With bttn.css

Do you like the current ghost buttons or the ones in Material Design? No matter which flat design concept you prefer, I’m sure the small stylesheet bttn.css has one or two buttons you’ll like.

bttn.css: 13 Different Flat Style Buttons

Buttons in pure CSS are the way of choice for modern buttons. The stylesheet bttn.css makes the creation of appealing buttons very easy. All it takes is the distribution of predefined classes.

The following button

, for example, is created using the following class assignments:

<button class="bttn-slant bttn-lg bttn-success">large</button>

It doesn’t get much easier than that. bttn.css comes with thirteen buttons in six colors, and four sizes. Each parameter is attached as an additional class. The developer could’ve made the color definitions a bit clearer, however. You might figure out that bttn-success represents green, but bttn-royal for purple, or bttn-warning for orange requires an unnecessary faculty of abstraction which won’t even lead to the right associations in some parts of the world. Whatever, you have to figure out the six color classes if you want to use them.

bttn.css, Low File Weight, and Flexible Application

When compressed, bttn.css only weighs about 32kb, while the readable form takes up 42kb. If you find that too much for a few buttons, you can also download the CSS for each button separately. This way, the buttons weigh about 6kb a piece. Usually, one button per project is enough if you pay attention to creating a consistent user interface.

All parameters can be defined comfortably, and then be placed into your project via the clipboard. On the configuration page, you’ll also find the download option for the separate CSS files. In addition to their modern looks, they also come with contemporary animation effects, which still are not to be taken for granted.

bttn.css is created and taken care of by Ganapati Bhat, a frontend developer from Bangalore in India. The project is available for free use under the liberal MIT license on Github. Ganapi released the initial version in early November of 2016 and has been active since. In the meantime, his project has managed to be featured on ProductHunt, and it has also trended on Github.

Ioanni Mitsakis

Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)