Custom class button

leeakers11

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

Hello,

Please target the span element to hover.

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

leeakers11

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

leeakers11

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