Source button 'hover' colours

The Source button stack allows to customise the border, background and text colour. In addition, the background colour in the ‘hover’ state can also be defined. What is missing, however, are the border and text colour in the ‘hover’ state. This would allow e.g. a nice color inversion upon hovering.

While the stack doesn’t offer these settings directly, is there possibly some CSS trickery to define those colours for the ‘hover’ state ?

Thanks everyone for sharing your expertise.

I should really have added colour options in for them. Easy enough with some CSS though. Add a class to the button stack (in S4) e.g. myHoverStyle and then add this css to the relevant place in RW:

.myHoverStyle .source-button:hover{
	border-color: black;
	color: black
}
2 Likes

Hello Stuart,

thanks for the quick response - works like a charm. I should have known that it is easy, and it makes a great learning for me and maybe a few others ;)

1 Like

That’s handy, I’ve added it to the Template Repo knowledge base.

2 Likes