Button Click Effects

🔗 Demo Page: https://chakor-demo-4.bubbleapps.io/version-test/button_click_effects

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

The Button Effects on Hover 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.

Choose from these unique effects/animations to enhance user experience:

• Push Down - The button subtly compresses, mimicking a physical press.
  
• Rotate - A slight rotate effect upon click, adding a smooth animated motion.
  
• Shrink - The button gracefully reduces in size, creating a sleek effect.
  
• Confetti - A celebratory burst of colorful confetti particles on click.
  
• Bubbles - Playful bubbles float from the button upon click, adding a fun, interactive touch.
  
• Buzz Out - The button shakes with a buzzing motion.
  
• Wobble Horizontal - A rhythmic side-to-side wobble animation.
  
• Wobble Vertical - A bouncy up-and-down wobble animation.
  
• Jello - The button jiggles like jello, with a fun visual appeal.
  
• Swing - A swing motion with a smooth animation effect.
  
• Pop - The button contracts and expands momentarily, representing a popping animation.
  
• Groove - A rhythmic motion for a 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 click" 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 click element anywhere on your page where you want the click effect to appear. Each type of animation requires a separate button click 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 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 click element is needed per animation type.
   
   
4. Customize and Preview: Adjust any additional settings as needed and preview the hover effects to ensure they appear as desired.