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