[fancyheading heading=”h3″ align=”textleft”]Beautiful Flat Buttons[/fancyheading]
In the below shortcode you will see the buttons with sizes small, medium, and large respectively.
This theme gives you a huge variation of options for buttons like styles, sizes, background and much more for more features see the parameters below.
[demo_space height=”30px”]
[one_half]
[fancyheading heading=”h4″ align=”textleft”]Buttons with Border Style[/fancyheading]
[button size=”small” style=”border” fullwidth=”false”]Get Started[/button]
[demo_space height=”10px”]
[button size=”medium” style=”border” fullwidth=”false”]Get Started[/button]
[demo_space height=”10px”]
[button size=”large” style=”border” fullwidth=”false”]Get Started[/button]
[demo_space height=”10px”]
[/one_half]
[one_half_last]
[fancyheading heading=”h4″ align=”textleft”]Buttons with Flat Style[/fancyheading]
[button color=”pumpkin” size=”small”]Small Button[/button]
[demo_space height=”10px”]
[button color=”pumpkin” size=”medium”]Medium Button[/button]
[demo_space height=”10px”]
[button color=”pumpkin” size=”large”]Large Button[/button]
[/one_half_last]
[demo_space height=”30px”]
[fancyheading heading=”h4″ align=”textleft”]Buttons With Different Color Variations[/fancyheading]
[button color=”greensea” size=”small” style=”flat” fullwidth=”false”]Greensea[/button] [button color=”nephritis” size=”small” style=”flat” fullwidth=”false”]Nephritis[/button] [button color=”belizehole” size=”small” style=”flat” fullwidth=”false”]Belizehole[/button] [button color=”wisteria” size=”small” style=”flat” fullwidth=”false”]Wisteria[/button] [button color=”midnightblue” size=”small” style=”flat” fullwidth=”false”]Midnightblue[/button] [button color=”orange” size=”small” style=”flat” fullwidth=”false”]Orange[/button] [button color=”pumpkin” size=”small” style=”flat” fullwidth=”false”]Pumpkin[/button] [button color=”pomegranate” size=”small” style=”flat” fullwidth=”false”]Pomegranate[/button] [button color=”silver” size=”small” style=”flat” fullwidth=”false”]Silver[/button] [button color=”abestos” size=”small” style=”flat” fullwidth=”false”]Abestos[/button] [button color=”black” size=”small” style=”flat” fullwidth=”false”]Black[/button]
[demo_space height=”30px”]
[fancyheading heading=”h4″ align=”textleft”]Buttons With Font Awesome Version 3.2[/fancyheading]
[button color=”wisteria” size=”small” fullwidth=”false”] Small Button[/button]
[demo_space height=”0px”]
[button color=”wisteria” size=”medium” fullwidth=”false”] Medium Button[/button]
[demo_space height=”10px”]
[button color=”wisteria” size=”large” fullwidth=”false”] Large Button[/button]
[demo_space height=”30px”]
[fancyheading heading=”h4″ align=”textleft”]Buttons On Roll Over Color[/fancyheading]
[button bgcolor=”#2c3e50″ hoverbgcolor=”#1abc9c” hovertextcolor=”#ffffff” textcolor=”#ffffff” size=”medium” fullwidth=”false”]Button Roll Over Color[/button]
[demo_space height=”10px”]
[button hoverbgcolor=”#444444″ hovertextcolor=”#ffffff” textcolor=”#444444″ size=”medium” style=”border” fullwidth=”false”]Button Roll Over Color[/button]
[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:
[demo_space height=”20px”]
[button bgcolor="#2c3e50" hoverbgcolor="#1abc9c" hovertextcolor="#ffffff" textcolor="#ffffff" size="medium" fullwidth="false"]Button Roll Over Color[/button]
[divider style=”thin” margin=”40px 0 40px 0″]
Customization Options and Features:
[demo_space height=”20px”]
[list style=”square” color=”black”]
- ID: Optional CSS value.
- Class: Custom CSS class.
- Link: Enter link URL.
- Link Target: Choose option when reader clicks on the link.
- Lightbox: Check this if you wish to display button Lightbox.
- Color: Select the color variation.
- Align: Select the alignment for a button.
- BG Color: Button background color default state.
- Text Color: Button Text color default state.
- Hover BG Color: Button background color on hover state.
- Hover Text Color: Button Text color on hover state.
- Button Size: Select the button size.
- Button Style: Select the button Style.
- Fullwidth: Check this if you wish to display button in full width and uncheck if you wish to use specific width below.
- Button Width: Use px or % as units for width, do not leave only integers.
- Button Text: Type the text you wish to display for button.
[/list]
