Standard (Free Version)

Back

Flat CSS Buttons

Free Download

* CSS - Only (no images)
* 3 sizes (Large, Medium, Small)
* 3 types (square, round, oval)
* 6 Different colors * Works in button, a, input tags
* Works in FireFox, Safari, Chrome, Opera, IE9 and up *Works with Bootstrap and Foundation front-end frameworks and font-awesome

If you are interested in Social Media Icons or Other Color Themes stay tuned you can purchase for $5.00

Getting Started

Add flat-css-buttons-standard.css file to as link in the header your html document

<link href="css/flat-css-buttons-standard.css" rel="stylesheet" />

If you want to use font-awesome icons add font-awesome to the header your html document

Documentation for Font-Awesome Icons

<link href="css/font-awesome.min.css" rel="stylesheet" />

Documentation

How to build a button, use classes .fl then add the button type/color, then size, then shadow if you want, the order doesn't matter

Button

<button class="fl fl-default">Button</button>

input

<input type="button" value="Button" class="fl fl-default"/>

a tag

<a href="#" class="fl fl-default"> a tag </a>

Sizes

Use .fl-lg for Large, .fl-md for Medium, .fl-sm for small buttons

<button class="fl fl-default fl-lg">Button</button>

Types

Use .fl-rd-sq for rounded square buttons or .fl-ovl for oval buttons, the square button is the .fl-default class. To add a shadow use .fl-shadow class

<button class="fl fl-rd-sq fl-md ">Button</button>

If you want to add a shadow use the fl-shadow class

<button class="fl fl-rd-sq fl-md fl-shadow">Button</button>

How to add a font awesome icon

<button class="fl fl-default fl-sm"><i class="fa fa-check"></i> icon</button>

Standard Colors

Use.fl-default (agua) for the default color, to add a different class color replace the .fl-default with another color

<button class="fl fl-dark fl-md">Button</button>

Square

Large	Medium	Small	Shadow	Disabled	Icon

Oval

Large	Medium	Small	Shadow	Disabled	Icon

Square Rounded

Large	Medium	Small	Shadow	Disabled	Icon