> 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/buttons/button-6.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.