[ux_banner height=»500px» bg=»676″ 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]