> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/buttons/button-6.md).

# Button #6

### Component Structure

* **BTN6 (Div)**: This is the main container for the button, applying foundational styles through the class `btn6__component`. It sets the stage for the button's overall appearance and behavior.
* **BTN6 BUTTON (Div)**: This clickable button element is structured with an `<a>` tag for navigation or action. Styled with the `btn6__button` class, it specifies the button's visual appearance, including padding, border-radius, and positioning.
* **BTN6 BG (Div)**: Serves as a background layer for the button, utilizing the class `btn6__bg` to apply absolute positioning and a full-width and height background with rounded corners.
* **BTN6 CONTENT (Div)**: Contains the button's textual and decorative elements, centrally arranged. The class `btn6__content` ensures these elements are displayed flexibly and centered.
* **BTN6 TEXT (Text-Basic)**: Displays the button text, "Gradient Button," with typography defined by the class `btn6__text`.
* **BTN6 CIRCLE (Div)**: A decorative circular element within the button, positioned to the right. Styled with the `btn6__circle` class, it's designed with specific dimensions, color, and positioning.
* **BTN6 ARROW (Image)**: Arrow images inside the button, enhancing its interactive appeal. These are styled with the `btn6__arrow` class, positioning them accurately within the circular element.
* **BTN6 GRADIENT (Div)**: A visually striking gradient background for the button, created with the `btn6__gradient` class to produce dynamic color transitions.

### Animation Structure

**Timeline: BTN6 - HOVER**

* Enhances the button's hover state with various animations targeting the `btn6__button`, `btn6__circle`, `btn6__text`, and `btn6__gradient` classes, adjusting their sizes, positions, and visibility to create engaging effects upon interaction.

**Timeline: BTN6 - GRADIENT**

* Focuses on the `btn6__gradient` class for a continuous, captivating background movement within the button, making it stand out and inviting user interaction.