fbpx

Some of Our Gradient Button Styles

Button OneButton Two
Button One$Button Two$
Button OneButton Two
Button OneButton Two
Button One$Button Two$
Button One$Button Two$
Button One$Button Two$
Button One$#Button Two
Button One=<Button Two
8Button OneButton Two9
Button OneButton Two
Button OneTSButton Two
Button One!"Button Two
Button One>?Button Two
Button OnePOButton Two
Button OneButton Two
Button OneEDButton Two
Button OneYXButton Two
Button OneButton Two
Button OneYXButton Two
Button OneYXButton Two
Button OneButton Two
Button OnemButton Twoo
Button OneA@Button Two
Button OneButton Two
Button One9Button Two9
Button One$#Button Two
Button OneButton Two
Button OneButton Two
Button OneButton Two
[dnxt_next_button button_text=”Download Gradient Button Layouts!” button_link=”https://plugins.divinext.com/divi-dual-button/wp-content/uploads/sites/7/2019/12/Dual-button-gradient-section-layout.json” dnxt_button_alignment=”center” btn_icon=”%%266%%” btn_icon_color=”#000000″ btn_on_hover=”off” dnxt_hover_bg=”dnxt-hover-sweep-to-top” dnxt_hover_bg_color=”#0c71c3″ dnxt_hover_icons=”dnxt-hover-icon-down” module_class=”download-button” _builder_version=”4.0.7″ btn_fonts_font=”Poppins|500|||||||” btn_fonts_text_color=”#000000″ btn_fonts_font_size=”16px” btn_fonts_line_height=”2.4em” custom_padding=”7px|32px|7px|32px|true|true” border_radii_btn_border=”on|4px|4px|4px|4px” border_width_all_btn_border=”0px” border_width_bottom_btn_border=”6px” border_color_bottom_btn_border=”#0C71C3″ box_shadow_style=”preset3″ box_shadow_blur=”16px” box_shadow_spread=”-16px” box_shadow_color=”#0c71c3″ dnxt_hover_bg_last_edited=”off|desktop” btn_fonts_text_color__hover=”#ffffff” btn_fonts_text_color__hover_enabled=”on|desktop” btn_icon_color__hover=”#ffffff” btn_icon_color__hover_enabled=”on|desktop” background__hover_enabled=”off|desktop”][/dnxt_next_button]
[dnxt_next_multi_heading text_one=”100+ Hover Effect” heading_tag=”h2″ inline_multi_align=”center” text_one_reveal_effect=”on” text_one_reveal_color_before=”#0077FF ” _builder_version=”4.4.1″ text_one_font=”Poppins|700|||||||” text_one_text_color=”#000000″ text_one_font_size=”45px” text_one_line_height=”68px” custom_margin_last_edited=”off|phone” custom_padding_tablet=”” custom_padding_phone=”||15px||false|false” custom_padding_last_edited=”on|tablet” scroll_horizontal_motion_enable=”on” scroll_horizontal_motion=”0|50|50|100|0.5|0|0.5″ text_one_font_size_tablet=”35px” text_one_font_size_phone=”25px” text_one_font_size_last_edited=”on|desktop” text_one_line_height_tablet=”40px” text_one_line_height_phone=”25px” text_one_line_height_last_edited=”on|phone” scroll_horizontal_motion_tablet=”” scroll_horizontal_motion_phone=”0|50|50|100|0|0|0″ scroll_horizontal_motion_last_edited=”on|desktop” background__hover_enabled=”on|hover”][/dnxt_next_multi_heading]

The selection of a proper hover effect would increase the attractiveness of a dual button. Just select the appropriate one from the bundle of more than a hundred innovative and creative hover effects.

Background Transitions

Fade$Sweep To Top$
Sweep To Right$Sweep To Left$
Sweep To Right$Sweep To Right$
Sweep To Left$Bounce To Top$
Sweep To Bottom$Sweep To Top$
Bounce To Right$Bounce To Left$
Bounce To Top$Bounce To Bottom$
Bounce To Left$Bounce To Bottom$
Radial Out$Radial In$
Rectangle In$Rectangle Out$
Shutter In Horizontal$Shutter In Vertical$
Shutter In Vertical$Shutter In Horizontal$
Shutter Out Horizontal$Shutter In Vertical$
Sweep To Top$Rectangle Out$
Bounce To Top$Sweep To Top$
Sweep To Right$Sweep To Left$
Bounce To Top$Bounce To Bottom$
Bounce To Right$Bounce To Top$
Bounce To Left$Bounce To Right$
Bounce To Bottom$Bounce To Top$
Bounce To Top$Bounce To Bottom$
[dnxt_next_button button_text=”Download Background Effects Layouts!” button_link=”https://plugins.divinext.com/divi-dual-button/wp-content/uploads/sites/7/2019/12/Dual-button-background-effects-section-layout.json” dnxt_button_alignment=”center” btn_icon=”%%266%%” btn_icon_color=”#000000″ btn_on_hover=”off” dnxt_hover_bg=”dnxt-hover-sweep-to-top” dnxt_hover_bg_color=”#0c71c3″ dnxt_hover_icons=”dnxt-hover-icon-down” module_class=”download-button” _builder_version=”4.0.7″ btn_fonts_font=”Poppins|500|||||||” btn_fonts_text_color=”#000000″ btn_fonts_font_size=”16px” btn_fonts_line_height=”2.4em” custom_padding=”7px|32px|7px|32px|true|true” border_radii_btn_border=”on|4px|4px|4px|4px” border_width_all_btn_border=”0px” border_width_bottom_btn_border=”6px” border_color_bottom_btn_border=”#0C71C3″ box_shadow_style=”preset3″ box_shadow_blur=”16px” box_shadow_spread=”-16px” box_shadow_color=”#0c71c3″ dnxt_hover_bg_last_edited=”off|desktop” btn_fonts_text_color__hover=”#ffffff” btn_fonts_text_color__hover_enabled=”on|desktop” btn_icon_color__hover=”#ffffff” btn_icon_color__hover_enabled=”on|desktop” background__hover_enabled=”off|desktop”][/dnxt_next_button]

Icon Hover Effect

#Icon BackIcon Forward$
6Icon SinkIcon HangR
@Icon BackIcon BounceA
Icon PulseIcon Shrink
>Icon DownIcon Drop
3Icon DownIcon Up2
Icon Float AwayIcon Sink Away
Icon BuzzIcon Buzz Out
NIcon BobIcon Down
Icon Pulse GrowIcon Grow Rotate
Icon Grow NIcon ShrinkM
Icon RotateIcon BounceW
Icon PopIcon Push
Icon Pulse ShrinkIcon Pulse Grow
Icon HangIcon Bob
Icon FloatZIcon Sink
Icon UpIcon Down
Icon DropIcon Down
Icon Wobble HorizontalIcon Wobble Vertical
[dnxt_next_button button_text=”Download Icon Effects Layouts!” button_link=”https://plugins.divinext.com/divi-dual-button/wp-content/uploads/sites/7/2019/12/Dual-button-icon-effects-section-layout.json” dnxt_button_alignment=”center” btn_icon=”%%266%%” btn_icon_color=”#000000″ btn_on_hover=”off” dnxt_hover_bg=”dnxt-hover-sweep-to-top” dnxt_hover_bg_color=”#0c71c3″ dnxt_hover_icons=”dnxt-hover-icon-down” module_class=”download-button” _builder_version=”4.0.7″ btn_fonts_font=”Poppins|500|||||||” btn_fonts_text_color=”#000000″ btn_fonts_font_size=”16px” btn_fonts_line_height=”2.4em” custom_padding=”7px|32px|7px|32px|true|true” border_radii_btn_border=”on|4px|4px|4px|4px” border_width_all_btn_border=”0px” border_width_bottom_btn_border=”6px” border_color_bottom_btn_border=”#0C71C3″ box_shadow_style=”preset3″ box_shadow_blur=”16px” box_shadow_spread=”-16px” box_shadow_color=”#0c71c3″ dnxt_hover_bg_last_edited=”off|desktop” btn_fonts_text_color__hover=”#ffffff” btn_fonts_text_color__hover_enabled=”on|desktop” btn_icon_color__hover=”#ffffff” btn_icon_color__hover_enabled=”on|desktop” background__hover_enabled=”off|desktop”][/dnxt_next_button]

2D Effects

Backward$Forward$
Bob$Hang$
Bounce In$Bounce Out$
Buzz$Buzz Out$
Float$Sink$
Grow$Shrink$
Grow Rotate$Pulse Grow$
Hang$Pop$
Pop$Pulse$
Pulse$Pulse Grow$
Pulse Grow$Pulse Shrink$
Pulse Shrink$Push$
Push$Rotate$
Shrink$Sink$
Sink$Skew$
Skew Backward$Skew Forward$
Wobble Vertical$Wobble Horizontal$
Wobble Top$Wobble Bottom$
Wobble Skew$Wobble Top$
Wobble To Bottom Right$Wobble To Top Right$
[dnxt_next_button button_text=”Download 2D Effects Button Layouts!” button_link=”https://plugins.divinext.com/divi-dual-button/wp-content/uploads/sites/7/2019/12/Dual-button-2d-effects-section-layout.json” dnxt_button_alignment=”center” btn_icon=”%%266%%” btn_icon_color=”#000000″ btn_on_hover=”off” dnxt_hover_bg=”dnxt-hover-sweep-to-top” dnxt_hover_bg_color=”#0c71c3″ dnxt_hover_icons=”dnxt-hover-icon-down” module_class=”download-button” _builder_version=”4.0.7″ btn_fonts_font=”Poppins|500|||||||” btn_fonts_text_color=”#000000″ btn_fonts_font_size=”16px” btn_fonts_line_height=”2.4em” custom_padding=”7px|32px|7px|32px|true|true” border_radii_btn_border=”on|4px|4px|4px|4px” border_width_all_btn_border=”0px” border_width_bottom_btn_border=”6px” border_color_bottom_btn_border=”#0C71C3″ box_shadow_style=”preset3″ box_shadow_blur=”16px” box_shadow_spread=”-16px” box_shadow_color=”#0c71c3″ dnxt_hover_bg_last_edited=”off|desktop” btn_fonts_text_color__hover=”#ffffff” btn_fonts_text_color__hover_enabled=”on|desktop” btn_icon_color__hover=”#ffffff” btn_icon_color__hover_enabled=”on|desktop” background__hover_enabled=”off|desktop”][/dnxt_next_button]

Stroke Effects

Ripple Out$Trim$
Ripple Out$Ripple In$
Ripple In$Trim$
Underline From Left$Underline From Right$
Underline From Left$Underline From Center$
Underline From Right$Underline From Center$
Reveal$Underline Reveal$
Overline Reveal$Underline Reveal$
Overline From Left$Overline From Right$
Overline From Left$Overline From Center$
Overline From Right$Overline From Center$
[dnxt_next_button button_text=”Download Stroke Effects Button Layouts!” button_link=”https://plugins.divinext.com/divi-dual-button/wp-content/uploads/sites/7/2019/12/Dual-button-stroke-effects-section-layout.json” dnxt_button_alignment=”center” btn_icon=”%%266%%” btn_icon_color=”#000000″ btn_on_hover=”off” dnxt_hover_bg=”dnxt-hover-sweep-to-top” dnxt_hover_bg_color=”#0c71c3″ dnxt_hover_icons=”dnxt-hover-icon-down” module_class=”download-button” _builder_version=”4.0.7″ btn_fonts_font=”Poppins|500|||||||” btn_fonts_text_color=”#000000″ btn_fonts_font_size=”16px” btn_fonts_line_height=”2.4em” custom_padding=”7px|32px|7px|32px|true|true” border_radii_btn_border=”on|4px|4px|4px|4px” border_width_all_btn_border=”0px” border_width_bottom_btn_border=”6px” border_color_bottom_btn_border=”#0C71C3″ box_shadow_style=”preset3″ box_shadow_blur=”16px” box_shadow_spread=”-16px” box_shadow_color=”#0c71c3″ dnxt_hover_bg_last_edited=”off|desktop” btn_fonts_text_color__hover=”#ffffff” btn_fonts_text_color__hover_enabled=”on|desktop” btn_icon_color__hover=”#ffffff” btn_icon_color__hover_enabled=”on|desktop” background__hover_enabled=”off|desktop”][/dnxt_next_button]