Share your CSS

That is odd, they worked for me using v1.2.6.

However I noticed that the last selector still cites "random" class names.

I have tried minimising the selectors @jamedeus found by working down from div.side-bar and came up with this:

/* --- SYNC BUTTON --- */

/* Add button background, add rounded corners, reduce width & then centre*/
div.side-bar > div > button {
  background-color: #25282E !important;
  border-radius: 16px !important;
  width: 85% !important;
  margin-left: 7.5% !important;
}

/* Outline colour change on hover */
div.side-bar > div > button:hover {
  border: 1px solid #0097DB !important;
  border-radius: 16px !important;
}

/* Prevent button text color changing on hover */
div.side-bar > div > button > span {
  color: #FFFFFF !important;
}

Any better luck getting the sync button to change with this?

EDIT: or are you referring to every selector not working now in your css file? That often happens to me when I have accidentally missed a ; somewhere or have an unmatched number of { }.