Custom class button

leeakers11 · June 2020

Hi,

I'm making a website at: http://tobys12.sg-host.com/. In the header image, I've made a button with the a custom class (called ".whitebutton).

In the custom css section of the Betheme options I've used this code:

.whitebutton {

border-color: #ffffff !important;

color: #ffffff !important;

border: 1px solid #ffffff !important;

}

.whitebutton:hover {

color: #ffffff !important;

background-color: red !important;

}

But I can't get the background colour of the hover element to display in red as in the above .whitebutton:hover css, do you know why please?

Thanks

Pablo · June 2020

Hello,

Please target the span element to hover.

.whitebutton span:hover{ (...) }

Thanks

leeakers11 · June 2020

That's great, thanks for the help.

Another question - I've changed the hover state to red, when I remove the cursor from the button there is briefly a black that fades out, how do I target this so I don't get two colours (red and black) please?

Thank you.

Pablo · June 2020

Please use this CSS, it will remove that black background - it comes from the style of the button (stroke) from the theme.

html body a:hover.whitebutton.button{
	background:transparent !important;
}

Thanks

leeakers11 · June 2020

Brilliant, thanks very much for that, have a great day.

Custom class button

Comments

This website uses cookies