Button Hover and Click Effects

🔗 Demo Page: https://chakor-plugin-demo-6.bubbleapps.io/version-test/button_hover_and_click_effects

🔗 Editor Link: https://bubble.io/page?id=chakor-plugin-demo-6&tab=Design&name=button_hover_and_click_effects&type=page

The Button hover and Click Effects plugin allows you to enhance your user interface with dynamic, engaging animations/effects.
Effortlessly add stunning animations to your buttons with a wide variety of effects designed to elevate the user experience.

Hover Effects

2D Transition Effects:

• Float: The button lifts subtly, creating a floating effect.
  
• Zoom: Enlarges the button gently for a zoom-in effect.
  
• Shrink: Reduces the button's size, giving a shrinking illusion.
  
• Rotate: Adds a sleek rotating motion for dynamic appeal.
  
• Wobble Vertical: Creates a playful vertical wobble.
  
• Wobble Horizontal: Animates the button with a horizontal wobble.
  
• Forward: Moves the button slightly forward to the right.
  
• Backward: Slides the button backward to the left.
  

• Sweep Right: Animates 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 inward toward the center.
  
• Radial Out: Expands the background outward from the center.
  
• Shutter In: Reveals the background with an inward shutter effect.
  
• Shutter Out: Discloses the background with an outward shutter effect.

Click Effects

• Push Down: A subtle compression, mimicking a physical press.
  
• Rotate: Adds a smooth, rotational motion.
  
• Shrink: Gracefully reduces the button size.
  
• Confetti: A celebratory burst of colorful confetti particles.
  
• Bubbles: Playful, floating bubbles for a fun touch.
  
• Buzz Out: The button shakes with an energetic buzzing motion.
  
• Wobble: Choose between horizontal or vertical wobble animations.
  
• Jello: The button jiggles like jello with a playful bounce.
  
• Swing: A gentle swinging motion for smooth interaction.
  
• Pop: Quick contraction and expansion, mimicking a pop effect.
  
• Groove: Adds a rhythmic, groovy vibe.

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-effect" or "button-click-effect" element onto the page you want to use the effects. You will find the button effects elements on the left side of your Bubble editor within the list of visual elements.

Add the Plugin Element:

Place the button-hover-effect or button-click-effect element anywhere on your page where you want the hover/click effect to appear. Each type of animation requires a separate button hover or button click element.

Assign IDs to Buttons:

For each button that you want to apply an effect to, assign a unique ID.

Link Buttons to Effects:

In the button hover or button click 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/button click element is needed per effect type.

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.

Customize and Preview:

Adjust any additional settings as needed and preview the hover effects to ensure they appear as desired.