# Bubble - Button Effects on Hover

### Overview

This Plugin allows you to add up to 5 different "on Hover" effects for your Button elements, allowing you to craft a more interactive and user friendly app. The following 5 animation effects are included:

* Shrink on hover
* Grow on hover
* Swing on hover
* Opacity change on hover
* Rotate on hover

For a demo please visit: <https://buttoneffects.bubbleapps.io/>

### Instructions

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 effects" 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 usable elements.

In order to add an animation on hover effect to one of your buttons, you simply have to add one of the id attributes below to the button you want to apply the effect on. Here ist the list of ID attributes:

shrinkbutton swingbutton growbutton opacitybutton rotatebutton


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://anticode.gitbook.io/templates/plugins/bubble-button-effects-on-hover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.