Style light (default)

[button size=”small”]Small[/button] [button size=”medium”]Medium[/button] [button size=”large”]Large[/button]

[toggle title=”Get Code”]
[pre][button size=”small”]Small[/button]
[button size=”medium”]Medium[/button]
[button size=”large”]Large[/button][/pre]
[/toggle]

[divider_top]

Style dark

[button size=”small” style=”dark”]Small[/button] [button size=”medium” style=”dark”]Medium[/button] [button size=”large” style=”dark”]Large[/button]

[clearboth]

[toggle title=”Get Code”]
[pre][button size=”small” style=”dark”]Small[/button]
[button size=”medium” style=”dark”]Medium[/button]
[button size=”large” style=”dark”]Large[/button][/pre]
[/toggle]

[divider_top]

Style accented

[button size=”small” style=”accented”]Small[/button] [button size=”medium” style=”accented”]Medium[/button] [button size=”large” style=”accented”]Large[/button]

[clearboth]

[toggle title=”Get Code”]
[pre][button size=”small” style=”accented”]Small[/button]
[button size=”medium” style=”accented”]Medium[/button]
[button size=”large” style=”accented”]Large[/button][/pre]
[/toggle]

[divider_top]

Predefined button styles

[button size=”small” style=”white”]White[/button] [button size=”small” style=”black”]Black[/button] [button size=”small” style=”gray”]Gray[/button] [button size=”small” style=”limon”]Limon[/button] [button size=”small” style=”pink”]Pink[/button] [button size=”small” style=”burgund”]Burgund[/button]

[button size=”small” style=”coffee”]Coffee[/button] [button size=”small” style=”orange”]Orange[/button] [button size=”small” style=”purple”]Purple[/button] [button size=”small” style=”blue”]Blue[/button] [button size=”small” style=”teal”]Teal[/button]

[toggle title=”Get Code”]
[pre][button size=”small” style=”white”]White[/button]
[button size=”small” style=”black”] Black[/button]
[button size=”small” style=”gray”]Gray[/button]
[button size=”small” style=”limon”]Limon[/button]
[button size=”small” style=”pink”]Pink[/button]
[button size=”small” style=”burgund”]Burgund[/button]
[button size=”small” style=”coffee”]Coffee[/button]
[button size=”small” style=”orange”]Orange[/button]
[button size=”small” style=”purple”]Purple[/button]
[button size=”small” style=”blue”]Blue[/button]
[button size=”small” style=”teal”]Teal[/button][/pre]
[/toggle]

[divider_top]

Custom background and text colors

[button style=”custom” bgColor=”#e8f100″ textColor=”#FF0000″]#e8f100 and #FF0000[/button] [button style=”light” textColor=”#F63401″]#F63401[/button]

[toggle title=”Get Code”]
[pre][button style=”custom” bgColor=”#e8f100″ textColor=”#FF0000″]#e8f100 and #FF0000[/button] [button style=”light” textColor=”#F63401″]#F63401[/button][/pre]
[/toggle]

[divider_top]

Buttons with icons

[button size=”small” icon=”bell-alt” style =”dark”]SAMPLE BUTTON[/button] [button size=”medium” icon=”signal” style =”dark”]SAMPLE BUTTON[/button] [button size=”large” icon=”lightbulb” style =”dark”]SAMPLE BUTTON[/button]

[button size=”small” icon=”download-cloud” style =”light”]SAMPLE BUTTON[/button] [button size=”medium” icon=”thumbs-up-alt” style =”light”]SAMPLE BUTTON[/button] [button size=”large” icon=”twitter” style =”light”]SAMPLE BUTTON[/button]

[button size=”small” icon=”cloud” style =”purple”]SAMPLE BUTTON[/button] [button size=”medium” icon=”umbrella” style =”blue”]SAMPLE BUTTON[/button] [button size=”large” icon=”linkedin-squared” textColor=”#F63401″]SAMPLE BUTTON[/button]

[box class=”info”]Note: You can use all icon available in our icon fonts colection simply using icon name. All available icons you find here. [/box]

[toggle title=”Get Code”]
[pre][button size=”small” icon=”bell-alt” style =”dark”]SAMPLE BUTTON[/button] [button size=”medium” icon=”signal” style =”dark”]SAMPLE BUTTON[/button] [button size=”large” icon=”lightbulb” style =”dark”]SAMPLE BUTTON[/button][button size=”small” icon=”download-cloud” style =”light”]SAMPLE BUTTON[/button] [button size=”medium” icon=”thumbs-up-alt” style =”light”]SAMPLE BUTTON[/button] [button size=”large” icon=”twitter” style =”light”]SAMPLE BUTTON[/button][button size=”small” icon=”cloud” style =”purple”]SAMPLE BUTTON[/button] [button size=”medium” icon=”umbrella” style =”blue”]SAMPLE BUTTON[/button] [button size=”large” icon=”linkedin-squared” textColor=”#F63401″]SAMPLE BUTTON[/button][/pre]
[/toggle]

[divider_top]
[button style=”accented” size=”large”  textColor=”#ffffff” icon=”mail-7″]CONTACT US[/button]