[ux_banner height=\”500px\” bg=\”71675\” bg_overlay=\”rgba(0, 0, 0, 0.49)\”]

[text_box width=\”76\”]

Buttons

Create beautiful Call to Action buttons with the amazing Button Element

[button text=\”Primary Button\” style=\”shade\” link=\”test?asdf&asdf=asdf&asdf&\”]

[/text_box]

[/ux_banner]
[row]

[col span=\”3\”]

Unlimited Variations

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….

[/col]
[col span=\”9\”]

[button text=\”Primary Color\”]

[button text=\”Secondary Color\” color=\”secondary\” radius=\”12\”]

[button text=\”Alert Color\” color=\”alert\” icon=\”icon-heart\”]

[button text=\”Success Color\” color=\”success\”]

[button text=\”White Color\” color=\”white\”]

[button text=\”Primary Color\” style=\”outline\”]

[button text=\”Success Color\” color=\”success\” style=\”outline\” radius=\”99\”]

[button text=\”Alert Color\” color=\”alert\” style=\”outline\” radius=\”6\” icon=\”icon-heart\” icon_reveal=\”true\”]

[button text=\”Secondary Color\” color=\”secondary\” style=\”outline\”]

[/col]

[/row]
[section bg_color=\”rgb(44, 44, 44)\” dark=\”true\”]

[row]

[col span=\”3\”]

Buttons on Dark background

[/col]
[col span=\”9\”]

[button text=\”Primary Color\”]

[button text=\”Secondary Color\” color=\”secondary\”]

[button text=\”Alert Color\” color=\”alert\”]

[button text=\”Success Color\” color=\”success\”]

[button text=\”White Color\” color=\”white\”]

[button text=\”Primary Color\” style=\”outline\”]

[button text=\”Success Color\” color=\”success\” style=\”outline\”]

[button text=\”Alert Color\” color=\”alert\” style=\”outline\”]

[button text=\”Secondary Color\” color=\”secondary\” style=\”outline\”]

[button text=\”White outline\” color=\”white\” style=\”outline\”]

[/col]

[/row]

[/section]
[row]

[col span=\”3\”]

Button Styles

Select between many different button styles.

[/col]
[col span=\”9\”]

[button text=\”Simple link\” style=\”link\”]

[button text=\”Underline\” style=\”underline\”]

[button text=\”Outline\” style=\”outline\” depth=\”2\” depth_hover=\”2\”]

[button text=\”Normal\” depth=\”2\” depth_hover=\”5\”]

[button text=\”Gloss\” style=\”gloss\” radius=\”99\” depth=\”2\” depth_hover=\”5\”]

[button text=\”Shade\” style=\”shade\” radius=\”7\” depth=\”2\” depth_hover=\”5\”]

[button text=\”Bevel\” style=\”bevel\” radius=\”12\” depth=\”2\” depth_hover=\”5\”]

[/col]

[/row]
[row]

[col span=\”3\”]

Button with icon

Choose between many included Flatsome Icons.

[/col]
[col span=\”9\”]

[button text=\”Icon Button\” style=\”bevel\” radius=\”8\” icon=\”icon-twitter\” icon_pos=\”left\”]

[button text=\”Icon Left\” style=\”outline\” radius=\”6\” icon=\”icon-instagram\”]

[button text=\”Reveal Left\” style=\”outline\” icon=\”icon-play\” icon_pos=\”left\” icon_reveal=\”true\”]

[button text=\”Reveal Right\” icon=\”icon-angle-right\” icon_reveal=\”true\”]

[button text=\”Large Button\” style=\”bevel\” size=\”xlarge\” radius=\”8\” icon=\”icon-twitter\” icon_pos=\”left\”]

[button text=\”Large Reveal\” style=\”bevel\” size=\”xlarge\” radius=\”8\” icon=\”icon-checkmark\” icon_pos=\”left\” icon_reveal=\”true\”]

[/col]

[/row]
[row]

[col span=\”3\”]

Simple Button Styles

[/col]
[col span=\”9\”]

[button text=\”Primary Color\” style=\”link\” icon=\”icon-play\” icon_reveal=\”true\”]

[button text=\”Secondary Color\” color=\”secondary\” style=\”link\”]

[button text=\”Success Color\” color=\”success\” style=\”link\”]

[button text=\”Alert Color\” color=\”alert\” style=\”link\”]

[/col]

[/row]
[row]

[col span=\”3\”]

Button Radius

Add custom radius to buttons

[/col]
[col span=\”9\”]

[button text=\”Normal Button\” size=\”large\”]

[button text=\”Round Button\” size=\”large\” radius=\”10\”]

[button text=\”Circle Button\” size=\”large\” radius=\”99\”]

[button text=\”Normal Button\” style=\”outline\” size=\”large\”]

[button text=\”Round Button\” style=\”outline\” size=\”large\” radius=\”10\”]

[button text=\”Circle Button\” style=\”outline\” size=\”large\” radius=\”99\”]

[/col]

[/row]
[row]

[col span=\”3\”]

Button Shadow

Add drop shadow to buttons to make them stand out more.

[/col]
[col span=\”9\”]

[button text=\”Large Shadow\” style=\”bevel\” size=\”large\” depth=\”5\” depth_hover=\”4\”]

[button text=\”Medium Shadow\” style=\”bevel\” size=\”large\” depth=\”3\” depth_hover=\”4\”]

[button text=\”Small Shadow\” style=\”bevel\” size=\”large\” depth=\”1\” depth_hover=\”2\”]

[/col]

[/row]
[row]

[col span=\”3\”]

Button Sizes

[/col]
[col span=\”9\”]

[button text=\”x Small\” size=\”xsmall\”]

[button text=\”Smaller\” size=\”smaller\”]

[button text=\”Small\” size=\”small\”]

[button text=\”Normal\”]

[button text=\”Large\” size=\”large\”]

[button text=\”Larger\” size=\”larger\”]

[button text=\”X LARGE\” size=\”xlarge\”]

[/col]

[/row]
[row]

[col span=\”3\”]

Smart Links

Add simple text to button links to link to various WordPress and WooCommerce pages.

[/col]
[col span=\”4\”]

\’shop\’ : Goes to Shop page

\’account\’ Goes to My Account Page

\’checkout\’ Goes to Checkout page

\’blog\’ Goes to blog page

[/col]
[col span=\”4\” span__sm=\”12\”]

\’home\’ Goes to homepage

\’wishlist\’ Goes to wishlist page

\’Page Title\’ Goes to page by Title.

[/col]

[/row]