Button Effects on Hover

🔗 Demo Page: https://chakor-plugin-demo-3.bubbleapps.io/version-test/button_effects_on_hover

🔗 Editor Link: https://bubble.io/page?id=chakor-plugin-demo-3&tab=tabs-1&name=button_effects_on_hover&type=page

Introducing our latest plugin: Button Effects on Hover

This plugin lets you effortlessly add dynamic and eye-catching hover animations to your buttons. Choose from two categories of effects—2D Transitions and Background Transitions—to create the perfect hover experience for your application's design.

• Two Effect Categories: Select from 2D Transitions and Background Transitions to fit your design needs.
  
• Diverse Hover Effects: Choose from 16 distinct hover effects, each designed to provide a unique and seamless interactive experience.
  
• Easy Integration: Simple to implement with minimal setup required.
  
• Customizable: Adjust settings to fit the style and functionality of your application.

• Float: Subtly lifts the button up, creating a floating effect.
  
• Zoom: Gently enlarges the button on hover for a zoom-in effect.
  
• Shrink: Reduces the button’s size to give a shrinking illusion.
  
• Rotate: Rotates the button to provide a dynamic effect.
  
• Wobble Vertical: Adds a vertical wobbling motion to the button.
  
• Wobble Horizontal: Adds a horizontal wobbling motion to the button.
  
• Forward: Moves the button slightly forward to the right.
  
• Backward: Pushes the button backward to the left.

• Sweep Right: Transitions the background from left to right.
  
• Sweep Left: Moves the background from right to left.
  
• Sweep Top: Slides the background from bottom to top.
  
• Sweep Bottom: Shifts the background from top to bottom.
  
• Radial In: Contracts the background from the edges inward.
  
• Radial Out: Expands the background from the center outward.
  
• Shutter In: Reveals the background with an inward shutter effect.
  
• Shutter Out: Reveals the background with an outwards shutter effect.

In order to use this Plugin, you will have to enable the option to add an ID attribute to your HTML elements.

To do this, go to Settings-> General and check the box next to "Expose the option to add an ID attribute to HTML elements".

Next you simply have to drag the "button-hover" element onto the page you want to use the effects. You will find the button effects on the left side of your Bubble editor within the list of visual elements.

1. Add the Plugin Element: Place the button-hover element anywhere on your page where you want the hover effect to appear. Each type of animation requires a separate button-hover element.
   
   
2. Assign IDs to Buttons: For each button that you want to apply an effect to, assign a unique ID.
   
   
3. Link Buttons to Effects: In the button-hover element, use the same ID assigned to the button(s) you want to animate. You can have multiple buttons with the same ID, but only one button-hover element is needed per animation type.
   
   
4. Apply Background Transition Effects (if applicable): If using a background transition effect, you can select a color in the button-hover element. This color will be used in the animation when the button is hovered over.
   
   
5. Customize and Preview: Adjust any additional settings as needed and preview the hover effects to ensure they appear as desired.