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