# How to change the buttons' colors on hover?

**URL:** https://meta.discourse.org/t/how-to-change-the-buttons-colors-on-hover/280278
**Category:** Support
**Tags:** versatile-banner
**Created:** [June 29, 2023, 9:22pm UTC](https://meta.discourse.org/t/how-to-change-the-buttons-colors-on-hover/280278 "2023-06-29T21:22:35Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![xomiamoore](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xomiamoore/32/284056_2.png) [@xomiamoore](https://meta.discourse.org/u/xomiamoore)
#### Post date: [June 29, 2023, 9:22pm UTC](https://meta.discourse.org/t/how-to-change-the-buttons-colors-on-hover/280278/1 "2023-06-29T21:22:35Z")

</div>

Hello and thanks for the awesome component 🙂

I am trying to customize the button color a bit more. It looks like to change the hover properties (either button color or text color), I have to change the CSS. But I can’t figure out exactly where to do that. Any help?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [June 29, 2023, 10:45pm UTC](https://meta.discourse.org/t/how-to-change-the-buttons-colors-on-hover/280278/2 "2023-06-29T22:45:19Z")

</div>

hi @xomiamoore🙂

you can try something like this and adjust the colors and other properties to your needs:

in common css of a theme or theme component:

```scss
// * button background * //

.banner-box .button-container .close, 
.banner-box .button-container .toggle {
    background: silver;
    &:hover {
    background: yellow;
    }
}

// * button text colors //

.banner-box .button-container .close .d-button-label, 
.banner-box .button-container .toggle .d-button-label {
    color: red;
    &:hover {
    color: blue;
    }     
}

// * arrow icon colors * //

.banner-box .button-container .close svg, 
.banner-box .button-container .toggle svg {
    color: grey;
    &:hover {
    color: black;
    }
}

```

you can also use hexadecimal color codes (ie: `#000000`) or theme variables (ie: `var(--secondary`)) for colors.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [June 30, 2023, 7:47am UTC](https://meta.discourse.org/t/how-to-change-the-buttons-colors-on-hover/280278/3 "2023-06-30T07:47:48Z")

</div>

Hi Mia,

> [@xomiamoore](#):
>
> But I can’t figure out exactly where to do that. Any help?

As it’s still good to know, we have a tutorial for this kind of modification:

> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [September 27, 2023, 9:10am UTC](https://meta.discourse.org/t/how-to-change-the-buttons-colors-on-hover/280278/4 "2023-09-27T09:10:55Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.