Include stylesheet, apply class, done.
I like flat design. I also like Free Flat Buttons, from freeflatbuttons.com. Did I mention they’re free? But most buttons are free, so the naming must be a marketing thing.
It’s been a while since Free Flat Buttons have seen any updates, but there’s really nothing to update in my opinion. They serve their purpose quite well. They look very nice when paired with FontAwesome, too.
Free Flat Buttons can be found on GitHub, it’s repository is very simple and only includes the button stylesheet and the HTML and CSS associated with the freeflatbuttons.com website.
They’re really simple to use, as they should be. All you have to do is include the CSS, <link rel=”stylesheet” href=”button.css”>, include the FontAwesome CSS if you want it, <link href=”http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet”>, and then add a class to an anchor tag.
For a normal sized button, something like this:
<a class="btn color-1" href="#">Color 1</a>
To make a button with rounded corners, use style-2, the other styles are listed on the freeflatbuttons.com site:
<a class="btn color-1 style-2" href="#">Color 1</a>
Aside from the homepage, a demo can also be found on CodePen. I’ve embedded it below. Version 1.0 of Free Flat Buttons can be downloaded from http://www.flatbuttons.com/button.css.
See the Pen Flat Buttons by Anıl Bilir (@Qanser) on CodePen.