# How to style hover, selected, disabled button states

{% embed url="<https://firebasestorage.googleapis.com/v0/b/savvy-flow-uploads/o/kZIe9h6uzYZTtvzSj9ke%2FStyling%20different%20button%20states__370049243755626.mp4?alt=media&token=7cc17035-3d19-4a74-8dc9-8d227def9bc3>" %}

### Select the button to style:

1. In the “**Edit**” sub-menu open the “**Designer**” card.
2. Select the button or options buttons you want to style.

### Specific button state styling:

1. Click "**+ Sub-Elements**".
2. Select the part of the component you want to style in the Options Selector. It could be "**Button**" or maybe you want to style the “**Checkbox**”. For single Button components, it would be "**Whole Thing**".
3. Click "**+ Filter**".
4. Select the “**When**” option that matches the button state you want to style e.g. "**selected**", “**disabled**”, or “**hover**”.
5. Any styles you set now, would only be visible when the button has the state you’ve chosen.

Easy wasn’t it?! 🙂

#### Disabled button styling:

{% hint style="info" %}
💡 For a button to show its disabled style, the button should have been set as disabled. The most common button disabled use is for a “next” button to be disabled if the page requirements had not been met. E.g. you need to provide your email address before continuing to the next page. Of course, also the email input should be configured as “required”.
{% endhint %}

### Related docs:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Styling CSS properties that are not there in the designer card (custom properties)</strong></mark></td><td><a href="how-to-style-css-properties-that-are-not-there-in-the-designer-card-custom-properties">how-to-style-css-properties-that-are-not-there-in-the-designer-card-custom-properties</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FDyDXyQVUaSGqG7oMv1Ye%2F2023-03-07_11h00_35.png?alt=media&#x26;token=595ec3d2-c655-484a-8642-fa910843d338">2023-03-07_11h00_35.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>How to style a specific component element (E.g. buttons image)</strong></mark></td><td><a href="how-to-style-a-specific-component-element-e.g.-buttons-image">how-to-style-a-specific-component-element-e.g.-buttons-image</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FpBdyh9O1cpWxF2rteyGE%2F2023-03-07_11h05_39.png?alt=media&#x26;token=dc8428e3-24f6-4f26-b5e3-09fc5bfe4db5">2023-03-07_11h05_39.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Styling components: Basics</strong></mark></td><td><a href="how-to-style-components-basics">how-to-style-components-basics</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FdBoGIB9aSCVsLRYcoPYm%2F2023-03-07_11h31_45.png?alt=media&#x26;token=e119793d-22d3-4d2c-b9ca-38fcbeaf7155">2023-03-07_11h31_45.png</a></td></tr></tbody></table>


---

# 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/how-tos/design-how-tos/how-to-style-hover-selected-disabled-button-states.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.