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