Custom Hover CSS CTA Button

[emgrace_uweci]

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! 

.button {
background-color: #4CAF50; /* GREEN */
border: none;
color: white;
border-radius: 20px;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Arial;
font-size: 40px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}

.button1 {
background-color: white;
color: #f57814;
border: 5px solid #f57814;
}

.button1:hover {
background-color: #f57814;
color: white;
}

[JanetArmstrong]

You'll probably need to use selectors like this to target the button in hubspot:

.hs-form button, .hs-form input[type=button], .hs-form input[type=reset], .hs-form input[type=submit] {

...styles here...

}

[emgrace_uweci]

Would I input that in the CTA portion of HubSpot or within the actual design file? 

My knowledge of CSS is extremely basic (one would argue below basic). I created the button using a CSS builder. 
Thank you for any insight you can provide. 

[MitchL]

Hi @emgrace_uweci,

Would you be able to link to a page where you're having the issue? 

Thanks, Mitch

[emgrace_uweci]

We do not have a current button on our site that is like this. Our previous buttons (found here: https://www.uweci.org/) are slightly varied. We would like our buttons sitewide to be like the code above where the white inside of the button inverts to the color of the text and the button fills. 

Only our blogs and landing pages are directly on HubSpot. The rest of our site is on WordPress. 

Thank you for any insight you can provide.