Dashboard ui button hover color

[sfedo]

Hello,

how to access the hover color of standard button? I would like to override it with custom css.

this is how the button looks like. Thanks to @hotNipi I managed to achieve this look.

now I would like to upgrade hover to similar look, right now it looks like this:

[Gunner]

Perhaps more details and showing your flow might help user involvement.

As well as some clarification... like what do you mean by "hover" color

[sfedo]

hover is when you hover with the mouse over the button.
atm it is the theme color. there is some css atribute to override, so it would change

[Gunner]

I have never seen any reaction to a "hovering" of the mouse cursor on the dashboard (short of the browser changing the icon)... I don't think there is any such thing with the dashboard

[sfedo]

add button and then hover over it... my first button is when the cursor is not on it, and the blue one is hovered

[Gunner]

I have buttons in my dashboard and none of them react at all when "hovering" with the mouse cursor.

EDIT... Sorry, I added a new button without any colouring... and yes there is a faint 'greying out' (I use dark mode) when hovering.

No idea how to manipulate that to a colour.

[sfedo]

see? this is hovering. I would like to change the custom theme color (here green) to anotherone with overriding css. but for this i need the css class

[Gunner]

I forgot that I had an example theme edit going on my whole dashboard... might have been affecting how I saw the "hover" results.

Anyhow, I found this in that list... might help with what you are looking for in the CSS class

.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
    background-color: #88888855;
}

YES... commenting that out on my dashboard theme edit, caused a hover (on a default button NOT one that I pre-chose the colour for) to change between blank and system colour (blue in my case)

[jbudd]

I'm far from sure this is the best way to do it but this will change the background hover colour for all buttons

[{"id":"36310a4f.be421e","type":"ui_template","z":"6a947c4c.60270c","group":"a6e358b.672ffa8","name":"Button CSS","order":6,"width":0,"height":0,"format":"<style id=\"dashboard-style-override\">\n.nr-dashboard-button .md-button:hover {\nbackground-color: #00ffff !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":153.1999969482422,"y":477.20001220703125,"wires":[[]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

Or this will change it for a specific button (You have to use your button node's id in the css selector)

[{"id":"44c6a8d6.01ec1","type":"ui_template","z":"6a947c4c.60270c","group":"a6e358b.672ffa8","name":"Button CSS","order":6,"width":0,"height":0,"format":"<style id=\"dashboard-style-override\">\n/*.nr-dashboard-button .md-button:hover {\nbackground-color: #00ffff !important;\n}*/\n[node-id=\"20d45887.d8ef1\"] > button:hover {\n    background-color: #ff00ff !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":306.20001220703125,"y":435.20001220703125,"wires":[[]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

[Gunner]

@jbudd

Or this will change it for a specific button

Nice, even works for my pre-coloured button.

[sfedo]

.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
background-color: #88888855;
}

Thank you, this is what I was looking for!