Author: wp-engine

  • Buttons

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