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

Ready To Start New Project?

We would love to help with any upcoming and existing projects you have! Feel free to contact us through our contact form! We look forward to speaking with you and thank you for your interest in our company!