# Work in Progress: How to Style Buttons

{% hint style="info" %}
Some components are built by several parts. A Button component is one of those, so to achieve the style you want, you'll have to edit them separately.
{% endhint %}

### Step 1: Choose the Element you Want to Style

* Select the button to be styled
* Give it a tag if it doesn't have one (On the Right Side Bar, Options Tab)
* Open the Design Tab on the Right Side Bar
* In the "Choose an element" area you'll see the different element options. In Button components we have 4 options:
* The next area on the tab is "Apply these styles to". Select which components you want to affect with these new styles.

### Step 2: Style it!

* Further down on the design tab there's the "Now set your styles" area. There you'll find the most commonly used styles, and if there's one you can't find, you can always enter it as a custom style at the bottom of the list (the custom styles won't be reflected until you press enter. You can change it later)
* Have fun! You can find some recommendations in the following section:

{% content-ref url="/pages/pdtmv7gpYTVzTCyec24s" %}
[How to style hover, selected, disabled button states](/how-tos/design-how-tos/how-to-style-hover-selected-disabled-button-states.md)
{% endcontent-ref %}

### Step 3: Style some States

* Below the "Choose an Element" area, there's a toggle that says "Use states". When you switch that, you'll get a few more options to play around with:

* Select the State you want and go back to step 2!


---

# 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://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-style-buttons.md?ask=<question>
```

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.