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

# Button #1

### Changin the base sate

**Changing the backgroundcolor of the button:** Select the <mark style="color:purple;">`BTN1 BUTTON`</mark> Element and the class <mark style="color:green;">`.btn1__button`</mark>. Go to STYLE -> BACKGROUND and change the color to your needs.

***

**Changing the bordercolor of the button:** Select the <mark style="color:purple;">`BTN1 BUTTON`</mark> Element and the class <mark style="color:green;">`.btn1__button`</mark>. Go to STYLE -> BORDER / BOX SHADOW and change the color to your needs.

***

**Changing the backgroundcolor of the circle:** Select the <mark style="color:purple;">`BTN1 CIRCLE`</mark> Element and the class <mark style="color:green;">`.btn1__circle`</mark>. Go to STYLE -> BACKGROUND and change the color to your needs.

***

**Changing the bordercolor of the circle:** Select the <mark style="color:purple;">`BTN1 CIRCLE`</mark> Element and the class .<mark style="color:green;">`btn1__circle`</mark>. Go to STYLE -> BORDER / BOX SHADOW and change the color to your needs.

***

**Changing the color of the icon:** Select the <mark style="color:purple;">`BTN1 ICON`</mark> Element and the class <mark style="color:green;">`.btn1__icon`</mark>. Go to CONTENT and change the color to your needs.

***

**Changing the textcolor:** Select the <mark style="color:purple;">`BTN1 TEXT`</mark> Element and the class <mark style="color:green;">`.btn1__text`</mark>. Go to STYLE -> TYPOGRAPHY and change the color to your needs.

####

### Changin the base state

Open the Bricksforge Panel and go to TIMELINES. Find the <mark style="color:yellow;">`BTN1 - HOVER`</mark> timeline.

***

**Changing the backgroundcolor of the button:** Select the **first** animation, go to Background Color and change the color to your needs.

***

**Changing the backgroundcolor of the circle:** Select the **second** animation, go to the <mark style="color:yellow;">`TO TAB`</mark>, go to Background Color and change the color to your needs.

***

**Changing the textcolor:** Select the **third** animation, go to Color and change the color to your needs.