For a better experience please change your browser to CHROME, FIREFOX, OPERA or Internet Explorer.

    [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]