Hello and thanks for the awesome component :slight_smile: 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?

hi @xomiamoore :slight_smile: 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: // * 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.

Hi Mia, [image] Mia: 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: [image] Making custom CSS changes on your site Site Management 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…

How to change the buttons' colors on hover?

Product Support

Canapin (Coin-coin le Canapin) June 30, 2023, 7:47am 3

Hi Mia,

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

Topic		Replies	Views
Change hover background color for nav class buttons Development	21	785	August 9, 2024
Switching the discourse color scheme: Changing Red Hues in CSS Product Support	3	1258	September 1, 2023
How to use CSS for versatile-banner Product Support versatile-banner	7	405	December 26, 2024
Customize the New Topic button Developers how-to	11	2556	June 10, 2025
Customizing colors Product Support	9	3993	May 22, 2018

How to change the buttons' colors on hover?

Related topics