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

Viewed
Categories
Close

My Cart

Close

Wishlist

Recently Viewed

Close

Great to see you here !

Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.

Resend OTP (00:30)

Already got an account?

Close

Categories