Custom Hover CSS CTA Button
I am trying to create a custom CTA button that changes when someone hovers on it. The goal is for it to have a rectangular box filled with white and the outline and text in the box would be the same color. When someone hovers, the text and the fill would invert so the text becomes white and the box would be filled with the same color as the outline.
I believe I have the correct code. Please see below. I have created this code as a new file under the pages within the design manager. I then went and applied that style sheet file under the template portion in settings (for all pages on our website). After all of this, I have been trying to make this CTA live with a variety of different attempts by adding custom CSS classes in the CTAs advanced options.
Can anyone tell me what I am doing wrong to prevent the button from going live across our website? Thank you in advance!
background-color: #4CAF50; /* GREEN */
padding: 16px 32px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
border: 5px solid #f57814;