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]