Buttons correctly coloured in firefox but different in chrome and safari.

I have a default template and have overrided the buttom colours with custom css in my child theme. The colours appear correct in firefox as per my overrides, but are retaining the default colours in safari and chrome.

Chrome’s development tools shows the css from both my custom and the default css as struck out, but yet it is still reading the default.

This is my custom css override:

a.button {
    background-color: #0099CC;
    background-image: linear-gradient(to bottom, #0099CC, #006699);
    border: 1px solid #003366;
    text-shadow: 0 1px 0 #003366;
}

I have changed other button attributes, such as size, box shadow, link colour, all of which are displaying fine. So it is not a specificity or syntax issue.

The hover state for the checkout button – a background image – is displaying fine, but the background image ‘gradient’ is not displaying on other buttons.

The default gradient displays fine, and the is no other css, such as a background image, that might be overriding it, so it is not a css compatibility issue that I can see.

The only difference is that the custom colours are not being read. However according to Chrome’s development tools, the default is been overridden, but by what?

I have looked at it on different computers too.

Site is essentialopals.com if you want to debug.

Anyone have an idea what is causing this?