Buttons

We’ve incorporated all of the main bootstrap colors including many other theme colors. Buttons also come in different sizes and can include icons.

Bootstrap Button Colors

These are the default Bootstrap colors

[button link=”#”]Default[/button] [button link=”#” color=”primary”]Primary[/button] [button link=”#” color=”info”]Info[/button] [button link=”#” color=”success”]Success[/button] [button link=”#” color=”warning”]Warning[/button] [button link=”#” color=”danger”]Danger[/button]

 

Additional Theme Button Colors

Plenty of additional colors to fit any website color scheme.

[button link=”#” color=”black”]Black[/button] [button link=”#” color=”blue”]Blue[/button] [button link=”#” color=”brown”]Brown[/button] [button link=”#” color=”dark_blue”]Dark Blue[/button] [button link=”#” color=”dark_brown”]Dark Brown[/button] [button link=”#” color=”dark_green”]Dark Green[/button] [button link=”#” color=”green”]Green[/button] [button link=”#” color=”mauve”]Mauve[/button] [button link=”#” color=”orange”]Orange[/button] [button link=”#” color=”pearl”]Pearl[/button] [button link=”#” color=”pink”]Pink[/button] [button link=”#” color=”purple”]Purple[/button] [button link=”#” color=”red”]red[/button] [button link=”#” color=”slate_grey”]Slate Grey[/button] [button link=”#” color=”silver”]Silver[/button] [button link=”#” color=”steel_blue”]Steel Blue[/button] [button link=”#” color=”teal”]Teal[/button] [button link=”#” color=”yellow”]Yellow[/button] [button link=”#” color=”wheat”]Wheat[/button] [button link=”#” color=”white”]White[/button]

 

Ghost Button Colors

Each button color can also become a “ghost” button by adding the ghost class.

[button link=”#” class=”ghost”]Default[/button] [button link=”#” color=”primary” class=”ghost”]Primary[/button] [button link=”#” color=”info” class=”ghost”]Info[/button] [button link=”#” color=”success” class=”ghost”]Success[/button] [button link=”#” color=”warning” class=”ghost”]Warning[/button] [button link=”#” color=”danger” class=”ghost”]Danger[/button] [button link=”#” color=”black” class=”ghost”]Black[/button] [button link=”#” color=”blue” class=”ghost”]Blue[/button] [button link=”#” color=”brown” class=”ghost”]Brown[/button] [button link=”#” color=”dark_blue” class=”ghost”]Dark Blue[/button] [button link=”#” color=”dark_brown” class=”ghost”]Dark Brown[/button] [button link=”#” color=”dark_green” class=”ghost”]Dark Green[/button] [button link=”#” color=”green” class=”ghost”]Green[/button] [button link=”#” color=”mauve” class=”ghost”]Mauve[/button] [button link=”#” color=”orange” class=”ghost”]Orange[/button] [button link=”#” color=”pearl” class=”ghost”]Pearl[/button] [button link=”#” color=”pink” class=”ghost”]Pink[/button] [button link=”#” color=”purple” class=”ghost”]Purple[/button] [button link=”#” color=”red” class=”ghost”]red[/button] [button link=”#” color=”slate_grey” class=”ghost”]Slate Grey[/button] [button link=”#” color=”silver” class=”ghost”]Silver[/button] [button link=”#” color=”steel_blue” class=”ghost”]Steel Blue[/button] [button link=”#” color=”teal” class=”ghost”]Teal[/button] [button link=”#” color=”yellow” class=”ghost”]Yellow[/button] [button link=”#” color=”wheat” class=”ghost”]Wheat[/button]

 

Button Sizes

When, using the “size” parameter you can use the following sizes.

[button link=”#” size=”xs”]Mini[/button]
[button link=”#” size=”sm”]Small[/button]
[button link=”#”]Default[/button]
[button link=”#” size=”lg”]Large[/button]
[button link=”#” size=”xlg”]X-Large[/button]
[button link=”#” size=”xxlg”]XX-Large[/button]
[button link=”#” size=”xxxlg”]XXX-Large[/button]

 

Button Shapes

[button link=”#” size=”lg” shape=”rounded”]Rounded Button [/button]
[button link=”#” size=”lg” shape=”square”]Square Button[/button]
[button link=”#” size=”lg” shape=”pill”]Pill Button[/button]
[button link=”#” size=”lg” shape=”3d”]3D Button[/button]

 

Button Icons

Because of the awesomeness added by FontAwesome, you can easily add and any of the supported vector icons. To do this, you simply use the icon_before or icon_after parameters (or both) and insert the ID of the icon you want to use.

[button link=”#” icon_after=”arrow-circle-right”]Icon After Label[/button] [button link=”#” icon_before=”users”]Icon Before Label[/button] [button link=”#” color=”primary” icon_after=”facebook”]Icon After Label[/button] [button link=”#” icon_before=”rocket” color=”warning”]Icon Before Label[/button]

Scroll to Top