Buttons

Buttons

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

feedback_caps.png