Custom class button

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

Comments

  • Hello,
    Please target the span element to hover.
    .whitebutton span:hover{ (...) }

    Thanks
  • 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.
  • 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
  • Brilliant, thanks very much for that, have a great day.
Sign In or Register to comment.