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

# Button #7

#### Component Structure

**SC8 COMPONENT (Section)**

* **Class: `sc8__component`**
* This is the main container for the button setup. It uses CSS to set up the display and positioning, including the height of 100vh and centering of the contained elements.

**BTN7 (Div)**

* **Class: `btn7`**
* This div acts as a button. Each button contains text and a clipping layer for visual effects. The `btn7` class applies styles like display flex, center alignment, padding, border, and an overflow hidden setting to encapsulate the entire button styling.

**BTN7 TEXT WRAPPER (Div)**

* **Class: `btn7__text-wrapper`**
* Contains the button's text elements. The styling ensures that text is centered and allows for the absolute positioning of the second line of text to create overlapping visual effects.

**BTN7 TEXT (Text-Basic)**

* **Class: `btn7__text`**
* Displays the button's label text. It is positioned relatively to stay within the `btn7__text-wrapper` and is designed to overlap for a dynamic visual effect.

**BTN7 CLIP (Div)**

* **Class: `btn7__clip--*` (top, bot, left, right)**
* Provides a dynamic visual effect by using a clip path that animates on interaction. Each clip path variation corresponds to a button direction (top, bottom, left, right) and is styled with absolute positioning and a custom variable for the clip path size.

#### Animation Structure

**Timeline: BTN7 - (TOP, BOT, LEFT, RIGHT)**

* **Animations**:
  * **Clip Path Animation**: Adjusts the `--clip` custom property to animate the clip path size, creating a dynamic visual effect that reveals or conceals the button background.
  * **Text Movement Animation**: Moves the button text vertically and changes color, adding an interactive feel when the user hovers over the button.