# 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 `` 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: 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://bricksmotion.gitbook.io/bricksmotion-components/components/buttons/button-6.md?ask= ``` 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.