What is the best way to produce this button so that all colours change on hover

I am developing a button that is for a link which all colours need to change on hover, but cannot seem to get it to work, I know the CSS is a mess and all over but any advice will be appreciated link is [teeseyed.online/testing/button.html]

forgot to add the image

Why do you need to use inline styling to set the color on the divs inside of the link? Which do you think has a higher priority, a:hover in your CSS or the inline styling on those divs?

I think this is right. Try putting ALL CSS in a separate file. It will help ensure nothing unwanted is overriding what you intend to happen. Debugging will likely be a lot easier to do.

the location of the CSS is non-important at the moment, when i develop I use one file for ease. I have taken the CSS out of the style elements anďplaces in the section…if thats easier for you

I have updated the test page

The suggestion is to remove the CSS code from it’s current location and put it within the styles element.

The consensus is that having code in-line can override code that is within the styles tags or in a separate document. Perhaps try putting all CSS within the styles tags .

thankyou, I have moved the CSS to the styles section