Buttonic

Flat buttons

Plain buttons

Push buttons

Badge buttons

Note that the "icon-" classes are from Font-Awesome library.

Fancy classes

Gradient

Glows on mouse over

A block button

Acknowldgements

Works fine on Google Chrome, Mozilla Firefox, Apple Safari and Opera (on which the library was tested). There is a rendering problem with huge push button on Opera.
The push and badge buttons cannot be set to a different position style. Instead, you can nest them into a DOM and freely style this parent node.
The badge button cannot have more than one line of text, otherwise it will overflow awfully.
If you are wondering how to pronounce "Buttonic" as well as "Buttonify", here are the IPA pronunciations: /bʌ'tɒnɪk/ and /bʌ'təʊnɪfaɪ/.

Thanks to

The icons used were provided by Font-Awesome.
Thanks to @Anaas_Siq and @GeorgeSevernini for reviewing and giving tips about the design and the project as a whole.

Getting ready!

1. First Download the css files.

2. Then add the following rules into your code:

					<link rel="stylesheet" type="text/css" href="css_path/buttonic-plain.css">
					<link rel="stylesheet" type="text/css" href="css_path/buttonic-push.css">
					<link rel="stylesheet" type="text/css" href="css_path/buttonic-flat.css">
					<link rel="stylesheet" type="text/css" href="css_path/buttonic-badge.css">
					<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" >

Add just the CSS files that are suitable for you (for instance, add Font-Awesome just if you are going to use icons).

3. And you are done! Now you can buttone around!