Buttons

Variety of Button Styles

Set any color, add icons, control animations and much more.

[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item advanced_animations=”no”][button target=”_self” hover_type=”default” text=”Custom color” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#3cd2b5″ hover_background_color=”#333333″ border_color=”#3cd2b5″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item advanced_animations=”no”][button icon_pack=”dripicons” dripicon=”dripicons-chevron-right” target=”_self” hover_type=”default” text=”With arrow” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#333333″ hover_background_color=”#3cd2b5″ border_color=”#333333″ hover_border_color=”#3cd2b5″ icon_color=”#ffffff”][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item advanced_animations=”no” custom_class=”gradient-button”][button target=”_self” hover_type=”default” gradient=”yes” text=”Gradient” link=”#” color=”#ffffff” hover_color=”#ffffff”][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item advanced_animations=”no” custom_class=”outline-button”][button style=”white” target=”_self” hover_type=”default” text=”Outline” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]

Button Sizes

4 different size: extra large, large, default and small.

[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item advanced_animations=”no”][button size=”big_large” target=”_self” hover_type=”default” text=”Extra large size” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”6px 0 0 0″ advanced_animations=”no” item_padding_1024_1280=”6px 0 0 0″ item_padding_768_1024=”0 0 0 0″ item_padding_600_768=”0 0 0 0″ item_padding_480=”0 0 0 0″][button size=”large” target=”_self” hover_type=”default” text=”Large size” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”10px 0 0 0″ advanced_animations=”no” item_padding_1024_1280=”10px 0 0 0″ item_padding_768_1024=”0 0 0 0″ item_padding_600_768=”0 0 0 0″ item_padding_480=”0 0 0 0″][button target=”_self” hover_type=”default” text=”Default size” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”19px 0 0 0″ advanced_animations=”no” item_padding_1024_1280=”19px 0 0 0″ item_padding_768_1024=”0 0 0 0″ item_padding_600_768=”0 0 0 0″ item_padding_480=”0 0 0 0″][button size=”small” target=”_self” hover_type=”default” text=”Small size” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″ margin=”0″][/qode_elements_holder_item][/qode_elements_holder]

Custom Colors

Enhance your button with a nice color effect.

[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”0 0 0 0″ advanced_animations=”no”][button target=”_self” hover_type=”default” text=”Custom color” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#333333″ hover_background_color=”#3cd2b5″ border_color=”#333333″ hover_border_color=”#3cd2b5″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”0 0 0 0″ advanced_animations=”no”][button target=”_self” hover_type=”default” text=”Custom color” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#3cd2b5″ hover_background_color=”#333333″ border_color=”#3cd2b5″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”0 0 0 0″ advanced_animations=”no”][button target=”_self” hover_type=”default” text=”Custom color” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#5a64f4″ hover_background_color=”#333333″ border_color=”#5a64f4″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]
[qode_elements_holder number_of_columns=”one_column”][qode_elements_holder_item item_padding=”0 0 0 0″ advanced_animations=”no”][button target=”_self” hover_type=”default” text=”Custom color” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#ff9989″ hover_background_color=”#333333″ border_color=”#ff9989″ hover_border_color=”#333333″][/qode_elements_holder_item][/qode_elements_holder]

Button Shapes

4 different shapes: default, round, square and circle.

[button target=”_self” hover_type=”default” text=”Default” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″]
[button target=”_self” hover_type=”default” text=”Round” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″ border_radius=”12″]
[button target=”_self” hover_type=”default” text=”Square” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″ border_radius=”0″]
[button target=”_self” hover_type=”default” text=”Circle” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″ border_radius=”30″]

Button with Shadow

Enhance your button with a shadow effect.

[button target=”_self” hover_type=”default” button_shadow=”yes” text=”With shadow” link=”#” color=”#333333″ hover_color=”#ffffff” background_color=”#ffffff” hover_background_color=”#333333″ border_color=”#ffffff” hover_border_color=”#333333″]
[button target=”_self” hover_type=”default” button_shadow=”yes” text=”With shadow” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#3cd2b5″ hover_background_color=”#333333″ border_color=”#3cd2b5″ hover_border_color=”#333333″]
[button target=”_self” hover_type=”default” button_shadow=”yes” text=”With shadow” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#5a64f4″ hover_background_color=”#333333″ border_color=”#5a64f4″ hover_border_color=”#333333″ border_radius=”0″]
[qode_button_v2 target=”_self” icon_pack=”dripicons” dripicon=”dripicons-chevron-right” enable_shadow=”yes” enable_icon_square=”yes” hover_effect=”” gradient=”no” text=”With shadow” link=”#” icon_font_size=”18″]

Outline Variations

Enhance your button with a shadow effect.

[button target=”_self” hover_type=”default” text=”Light outline” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#e8e8e8″ hover_border_color=”#d4d4d4″]
[button target=”_self” hover_type=”default” text=”bold outline” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#d4d4d4″ hover_border_color=”#333333″]
[button target=”_self” hover_type=”default” text=”dark outline” link=”#” color=”#333333″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#333333″ hover_border_color=”#d4d4d4″]
[button target=”_self” hover_type=”default” text=”color outline” link=”#” color=”#3cd2b5″ hover_color=”#333333″ background_color=”rgba(255,255,255,0.01)” hover_background_color=”rgba(255,255,255,0.01)” border_color=”#3cd2b5″ hover_border_color=”#000000″]

Custom Typography

Enhance your button with typographic options: font family, font weight, letter spacing, etc.

[button target=”_self” hover_type=”default” text_transform=”none” text=”Custom Typography” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#3cd2b5″ hover_background_color=”#333333″ border_color=”#3cd2b5″ hover_border_color=”#333333″ letter_spacing=”0″]
[button target=”_self” hover_type=”default” text_transform=”uppercase” font_style=”normal” font_weight=”500″ text=”Custom Typography” link=”#” color=”#5a64f4″ hover_color=”#ffffff” background_color=”rgba(255,255,255,0.01)” hover_background_color=”#333333″ border_color=”#5a64f4″ hover_border_color=”#333333″ font_family=”Oswald medium” font_size=”13″ letter_spacing=”0″]
[button target=”_self” hover_type=”default” font_weight=”700″ text=”Custom Typography” link=”#” color=”#ffffff” hover_color=”#ffffff” background_color=”#ff9989″ hover_background_color=”#333333″ border_color=”#ff9989″ hover_border_color=”#333333″ font_family=”Playfair Display” letter_spacing=”0″]
[button target=”_self” hover_type=”default” text_transform=”none” font_weight=”700″ text=”Custom Typography” link=”#” color=”#ffffff” hover_color=”#333333″ background_color=”#333333″ hover_background_color=”rgba(255,255,255,0.01)” border_color=”#333333″ hover_border_color=”#333333″ font_family=”Merriweather” letter_spacing=”0″]

Fancy Link Options

4 different shapes: default, round, square and circle.

[custom_font font_family=”Roboto” font_size=”14″ line_height=”26″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_shadow=”no” letter_spacing=”3″ color=”#333333″]LINK[/custom_font]
[custom_font font_family=”Roboto” font_size=”14″ line_height=”26″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”underline” text_shadow=”no” letter_spacing=”3″ color=”#333333″]LINK[/custom_font]
[custom_font font_family=”Roboto” font_size=”14″ line_height=”26″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_shadow=”no” letter_spacing=”3″ color=”#333333″]LINK[/custom_font]
[custom_font font_family=”Roboto” font_size=”14″ line_height=”26″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_shadow=”no” letter_spacing=”3″ color=”#333333″]LINK[/custom_font]
[custom_font font_family=”Roboto” font_size=”14″ line_height=”26″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”line-through” text_shadow=”no” letter_spacing=”3″ color=”#333333″]LINK[/custom_font]
[custom_font font_family=”Roboto” font_size=”14″ line_height=”26″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_shadow=”no” letter_spacing=”3″ color=”#3cd2b5″ background_color=”#d8f6f0″]LINK[/custom_font]