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