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]