Buttons

Size variations

We have 6 different size: small, normal, large, x-large, xx-large, and full width.

[luv_button target=”_blank” size=”btn-s” href=”#” text=”SMALL BUTTON”]
[luv_button target=”_blank” href=”#” text=”NORMAL BUTTON”]
[luv_button target=”_blank” size=”btn-l” href=”#” text=”LARGE BUTTON”]
[luv_button target=”_blank” size=”btn-xl” href=”#” text=”XL BUTTON”]
[luv_button target=”_blank” size=”btn-xxl” href=”#” text=”XXL BUTTON”]
[luv_button target=”_blank” size=”btn-xxl” href=”#” text=”FULL WIDTH BUTTON” block=”true”]

Shape variations

4 different shape, you can mix any of them

[luv_button target=”_blank” href=”#” text=”DEFAULT”]
[luv_button target=”_blank” href=”#” text=”OUTLINE” only_border=”true”]
[luv_button target=”_blank” href=”#” text=”3D STYLE” is_3d=”true”]
[luv_button target=”_blank” href=”#” text=”ROUNDED” is_rounded=”true”]
[luv_button target=”_blank” href=”#” text=”OUTLINE + ROUNDED” only_border=”true” is_rounded=”true”]
[luv_button target=”_blank” href=”#” text=”3D + OUTLINE” only_border=”true” is_3d=”true”]
[luv_button target=”_blank” href=”#” text=”3D + ROUNDED” is_3d=”true” is_rounded=”true”]
[luv_button target=”_blank” href=”#” text=”ROUNDED + OUTLINE + 3D” is_rounded=”true” is_3d=”true” only_border=”true”]

Hover effects

Get more attention with the following unique hover effects

[luv_button target=”_blank” hover_effect=”btn-hover-fill-top” href=”#” text=”FILL FROM TOP”]
[luv_button target=”_blank” hover_effect=”btn-hover-fill-right” href=”#” text=”FILL FROM RIGHT” only_border=”false”]
[luv_button target=”_blank” hover_effect=”btn-hover-fill-bottom” href=”#” text=”FILL FROM BOTTOM” is_3d=”false”]
[luv_button target=”_blank” hover_effect=”btn-hover-fill-left” href=”#” text=”FILL FROM BOTTOM” is_rounded=”false”]
[luv_button target=”_blank” hover_effect=”btn-hover-expand-horizontal” href=”#” text=”EXPAND – HORIZONTAL” only_border=”false” is_rounded=”false”]
[luv_button target=”_blank” hover_effect=”btn-hover-expand-vertical” href=”#” text=”EXPAND – VERTICAL” only_border=”false” is_3d=”false”]
[luv_button target=”_blank” hover_effect=”btn-hover-expand-diagonal” href=”#” text=”EXPAND – DIAGONAL” is_3d=”false” is_rounded=”false”]

Hover animations

..or get more attention with animations

[luv_button target=”_blank” hover_animation=”bounce” href=”#” text=”BOUNCE”]
[luv_button target=”_blank” hover_animation=”shake” href=”#” text=”SHAKE”]
[luv_button target=”_blank” hover_animation=”rubberBand” href=”#” text=”RUBBER”]
[luv_button target=”_blank” hover_animation=”swing” href=”#” text=”SWING”]
[luv_button target=”_blank” hover_animation=”pulse” href=”#” text=”PULSE”]
[luv_button target=”_blank” hover_animation=”tada” href=”#” text=”TADA”]
[luv_button target=”_blank” hover_animation=”wobble” href=”#” text=”WOBBLE”]
[luv_button target=”_blank” hover_animation=”jello” href=”#” text=”JELLO”]

Buttons with icon

Choose your favorite from the 1000+ integrated icons

[luv_button target=”_blank” icon_display_effect=”btn-icon-default-left” href=”#” text=”DEFAULT – LEFT” icon=”fa fa-motorcycle”]
[luv_button target=”_blank” icon_display_effect=”btn-icon-default-right” href=”#” text=”DEFAULT – RIGHT” only_border=”false” icon=”fa fa-automobile”]
[luv_button target=”_blank” icon_display_effect=”btn-icon-slide-left” href=”#” text=”SLIDE – LEFT” only_border=”false” icon=”fa fa-cab”]
[luv_button target=”_blank” icon_display_effect=”btn-icon-slide-right” href=”#” text=”SLIDE – RIGHT” only_border=”false” icon=”fa fa-bus”]
[luv_button target=”_blank” icon_display_effect=”btn-icon-push-top” href=”#” text=”PUSH – TOP” only_border=”false” icon=”fa fa-fighter-jet”]
[luv_button target=”_blank” icon_display_effect=”btn-icon-push-left” href=”#” text=”PUSH – LEFT” only_border=”false” icon=”fa fa-rocket”]

Unique border styles

Enhance your buttons with unique, hand-drawn border styles

[luv_button target=”_blank” border_style=”btn-handdrawn lined-thick” href=”#” text=”LINED – THICK” only_border=”true”]
[luv_button target=”_blank” border_style=”btn-handdrawn dotted-thick” href=”#” text=”DOTTED – THICK” only_border=”true”]
[luv_button target=”_blank” border_style=”btn-handdrawn dashed-thick” href=”#” text=”DASHED – THICK” only_border=”true”]
[luv_button target=”_blank” border_style=”btn-handdrawn lined-thin” href=”#” text=”LINED – THIN” only_border=”true”]
[luv_button target=”_blank” border_style=”btn-handdrawn dotted-thin” href=”#” text=”DOTTED – THIN” only_border=”true”]
[luv_button target=”_blank” border_style=”btn-handdrawn dashed-thin” href=”#” text=”DASHED – THIN” only_border=”true”]

Custom colors

Make your buttons unique. You can modify every single color!

[luv_button target=”_blank” color_scheme=”custom-color” href=”#” text=”BUTTON” background_color=”#f04649″ color=”#ffffff” hover_color=”#1b1d1f”]
[luv_button target=”_blank” hover_effect=”btn-hover-fill-top” color_scheme=”custom-color” href=”#” text=”BUTTON” background_color=”#00aef0″ color=”#ffffff” hover_color=”#ffffff” hover_background_color=”#1b1d1f”]
[luv_button target=”_blank” color_scheme=”custom-color” href=”#” text=”BUTTON” color=”#10c9c3″ hover_color=”#ffffff” hover_background_color=”#1b1d1f” border_color=”#10c9c3″ hover_border_color=”#1b1d1f”]
[luv_button target=”_blank” border_style=”btn-handdrawn lined-thin” color_scheme=”custom-color” href=”#” text=”BUTTON” color=”#ffffff” hover_color=”#ffffff” hover_background_color=”#a5184c” only_border=”true” border_color=”#d31f97″ hover_border_color=”#a5184c” background_color=”#d31f97″]
[luv_button target=”_blank” color_scheme=”custom-color” href=”#” text=”BUTTON” color=”#8224e3″ hover_color=”#8224e3″ hover_background_color=”#ffffff” only_border=”true” border_color=”#8224e3″ hover_border_color=”#ffffff”]
[luv_button target=”_blank” hover_effect=”btn-hover-fill-left” color_scheme=”custom-color” href=”#” text=”BUTTON” color=”#ffffff” hover_color=”#ffffff” hover_background_color=”#d60015″ background_color=”#f04649″]