Beautiful CSS Buttons
Latest commit c408e03 Jun 22, 2013 @kbrmedia Update index.html
Failed to load latest commit information.
css Update buttons.less Jun 22, 2013 Create Jun 21, 2013 Update Jun 22, 2013
index.html Update index.html Jun 22, 2013

CSS Flat Buttons

Beautiful and highly customizable CSS buttons created by KBRmedia. View Live demo at


The usage is very simple. All you need to do is to add the appropriate class and that is it. The list of class is as follows:


.green, .blue, .red, .orange, .purple, .black

Sample Markup assuming namespace is button


<a href="" class="button red">I am a red button</a>


<input type="submit" class="button red" value="I am a red button">


<button class="button red">I am a red button</button>

Rounded corner

Just add .rounded to make the button rounded. The radius can be customized in the less file.

<a href="" class="button red rounded">I am a red button</a>


Just add .tooltip and data-tooltip="YOUR TOOLTIP CONTENT" to enable the tooltip.

<a href="" class="button red tooltip" data-tooltip="I am a tooltip">I am a red button</a>


You can easily customize the .less file included in the package and parse it using an online like Below is the list of variables you can modify.

@namespace: button; // Button class name e.g. class="button"

@font_size: 14px; // The size of the font of the button

@font_family: Helvitica, Arial; // The font family of the button

@border_radius: 5px; // The border radius of the rounded style

@default_color: #eee; // Default color of the button (class="button")

@green_color: #7BA813; // Color of the green button (class="button green")

@red_color: #C12D17; // Color of the red button (class="button red")

@blue_color: #0093B7; // Color of the blue button (class="button blue")

@orange_color: #DD8104; // Color of the orange button (class="button orange")

@purple_color: #8C24FF; // Color of the purple button (class="button purple")

@black_color: #444444; // Color of the black button (class="button black")


This work is licensed under a Creative Commons Attribution 3.0 Unported License. Feel free to use it for both personal and commerical projects. You can linkback to my site if you want to but you are not required.