Button Styler

Description

The Octygon Button Styler plugin brings some extra razzmatazz to the already pretty epic Divi buttons. More specifically it allows you to add hover effect animations including:

  • Grow
  • Shrink
  • Shadow
  • Slide
  • + Others

You can apply these hover effects to individual buttons via custom CSS Classes or you can apply them site-wide via the familiar Divi Theme Customizer settings.

For a demo of the available effects, click here.

Installation

  1. Download the plugin .zip file.
  2. In your WordPress admin area, navigate to Plugins > Add New.
  3. Upload the .zip file.
  4. Active the plugin.

Site Wide Settings

You can apply the hover effects to ALL buttons on your site via settings found in the Divi Theme Customizer. To access these settings, make sure:

  1. Divi or a Divi Child Theme is the active theme
  2. You have installed and activated the Octygon Button Styler plugin

Now in your WordPress admin go to Appearance > Customise. Once here navigate to Buttons > Buttons Hover Style. In this panel you will see some added setting related to the hover effects. Select as many or as few as you would like to apply.

Settings applied here will work on all buttons across your site.

Individual Button Settings

You can apply the hover effects to individual buttons. To do this, make sure:

  1. Divi or a Divi Child Theme is the active theme
  2. You have installed and activated the Octygon Button Styler plugin

Now when editing a page, open the CSS tab  on any module with a button (Button, Call To Action, Full Width Headr) and find the CSS Class field specific to the button for that module. Note that for the Button Module, this CSS Class field is simply the main CSS Class field. In to this CSS Class field, add any of the available CSS Classes  for which you would like the effect.

CSS Classes

The hover effects are applied to buttons via the addition of specific CSS Classes. Note these classes will only work if the Octygon Button Styler is installed and active.

Available Classes include:


Grow Effects

oct_btn_grow_1

oct_btn_grow_2

oct_btn_grow_3

oct_btn_grow_4


Shrink Effects

oct_btn_shrink_1

oct_btn_shrink_2

oct_btn_shrink_3

oct_btn_shrink_4


Shadow Effects

oct_btn_shadow_1

oct_btn_shadow_2

oct_btn_shadow_3

oct_btn_shadow_4


Slide Effects

oct_btn_slide_left

oct_btn_slide_right

oct_btn_slide_top

oct_btn_slide_bottom

oct_btn_slide_out_h

oct_btn_slide_out_v


Other Effects

oct_btn_wiggle

oct_btn_pulse

oct_btn_shiver

oct_btn_bounce

Pin It on Pinterest