Free Flat Buttons Are Free

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.

Hover.css and iHover: Pure CSS3 Hover Effects Collections

Hover all the things!

I’ve used Hover.css in previous projects and love it. As described by it’s author:

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

I recently stumbled on iHover, which is very similar to Hover.css. The only major difference is their homepage demo’s. Hover.css uses text, iHover uses images in their demos.

Here’s how iHover is described on it’s website:

iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

Hover.css is quite a bit smaller than iHover is, but it’s not as feature packed. That’s the exact reason that I’ve used Hover.css in previous projects. It’s so small but gives so many neat hover effects.

iHover effects are mostly taken from codrops articles, and was inspired specifically by this article on codrops.

You can find a demo of iHover here and a demo of Hover.css here.

Both iHover and Hover.css are on GitHub. iHover can be found on GitHub here, while Hover.css can be found on GitHub here.

What do you think? Would you ever use one of these? Have you used either, or something similar?