Dawn theme: HTML button color not working

[KaylaLynn]

I'm creating HTML buttons for some of my pages in order to link documents that are available for download. I used this tutorial to make the buttons, but I suspect there's CSS somewhere in my theme that is overriding the styling on the page.

I'm trying to create black buttons with white text that reverse and turn into white buttons with black text when you hover over them. It looks correct in the Shopify page editor, but when I go to the page itself, the text stays black. I've played around with different colors, and the text ALWAYS stays black and there's always a black border around the button. 

Is anyone familiar with the Dawn theme and know where this styling might be coming from? I only have a basic understanding of code, and I tried looking at Dawn's base.css file, but couldn't really make sense of the .button styling I saw there. Thanks!

Buttons on actual pageButtons on actual page (w/ hover)Buttons in Page Editor (w/ hover)

[made4Uo]

Hi @KaylaLynn ,

I suspected it was the way the code was rendered. Try to fix the code that you copied. Remove the spaces before the "=" Code should look like below. It should not make a difference with writing the code, but it does when the code is being rendered. I hope it make sense 🙂

<a class="button" href="http://shopify.com" target="_blank" rel="noopener noreferrer">Click here for PDF manual</a>

[KaylaLynn]

The spaces have been removed, but the buttons still aren't displaying properly.

[AvadaCommerce]

Hi @KaylaLynn ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[KaylaLynn]

My store URL is https://retailpartners.expedusa.com/ 

Pass: iavuly

[KaylaLynn]

Something I have noticed is that Shopify appears to be automatically commenting out my button styling. When I'm in the page editor, my styling code looks like:

<style><!--
.button {
background-color: #121212;
color: #ffffff;
font-size: 16px;
padding: 10px 30px;
text-align: center;
display: inline-block;
text-decoration: none;
}
.button:hover {
background: #ffffff;
color: #121212;
border: 2px solid black;
}
--></style>

Every time I try to delete the <!-- and -->, I refresh the page and they're back again. Not sure why that is.

[made4Uo]

Hi, 

You have to override the style. Replace your code for the buttons with this. 

.button {
   background-color: #121212;
   color: #fff !important;
   font-size: 16px;
   padding: 10px 30px;
   text-align: center;
   display: inline-block;
   text-decoration: none;
}
.button:hover {
   background: #ffffff;
   color: #121212 !important;
   border: 2px solid black;
}

[AvadaCommerce]

Hi @KaylaLynn ,

Can you post the exact link of the product or page that is having the problem? So that I can help you

Thanks you