Бbtn Blue Default Turquoise Green Dark Grey Yellow Бutton Red Dark Grey Yellow white

Бbtn is MIT licensed and It is Open Source.

Download Fork It CodingHard

Simplicity is the ultimate form of sophistication.

Leonardo da Vinci

Usage

Button styles can be applied to anything with the .bbtn class. However, typically you'll want to apply these to only <a> and <div> elements for the best rendering.

First of all you should <link> to bbtn.css 

<link rel="stylesheet" href="path-to/bbtn.css">


by using only the <a> tag 

<a href="#" class="bbtn" role="button">button-text</a>


by using the <a> and <div> tags 

<a href="#"><div class="bbtn" role="button">button-text</div></a>


For the icons I used Font Awesome. It gives you scalable vector icons that can instantly be customized. It's in the demo/plugin/font-awesome folder. Visit It's website to learn more.

Colors -just add the color name to class

Preview class=" "
Бutton bbtn
White
 bbtn white
Blue
 bbtn blue
Turquoise
 bbtn turquoise
Green
 bbtn green
Red
 bbtn red
Dark
 bbtn dark
Orange
 bbtn orange
Yellow
 bbtn yellow

Size -just add the size name to class

Preview class=" "
mini bbtn mini
default bbtn (default no need class)
large bbtn large
large2x bbtn large2x

Style -just add the style name to class

Preview class=" "
default bbtn
rounded bbtn rounded
shadow bbtn shadow

Customise Want to add new colors?


To add new color, open bbtn.css and scroll down to bbtn colors section. Copy the code below and follow the instructions. 

.bbtn.<color-name> /* Replace <color-name> with your color name */
{
  background-color: #3498db; /* change background-color */
  border-bottom-color: #2980b9; /* change border bottom color */
  color: #ffffff !important; /* change button's text color but "!important" should stay */
}

.bbtn.<color-name>:active { /* Replace <color-name> with your color name */
  background-color:#2980b9; /* use as the same color of "border-bottom-color"  */
}

Thank You...