Adding a button to homepage

Highlighted
New Member
1 0 0

Hi all,

I want to add a button on the homepage of my website. For this I used the code below. I added this with the section "Custom HTML". Now I don't get to see the colors I put in the code.

Does anyone know a solution for this?

Thank you in advance!

<center><a class="button" href="https://swapportret.nl/collections/alle-producten" target="_blank" rel="noopener noreferrer">Start hier met jouw schilderij</a></center> <style>
.button {
   background-color: #FF0554;
   color: #222222;
   font-size: 18px;
   padding: 10px 30px;
   font-weight: 300;
   text-align: center;
   display: block;
   text-decoration: none;
   width: 40%;
   cursor: pointer;
   text-transform: uppercase;
}
.button:hover {
  background-color: #FFFFFF;
}
@media (max-width: 480px){
  .button{
    width: 80%;
  }
}
</style>

 

0 Likes
Highlighted
Shopify Partner
65 10 16

Hi @bashett

Since the class button is a pretty common one when it comes to theme development, I'm guessing(?) that your parameters are getting overwritten by theme CSS—though it's hard to tell without access to the code (it really shouldn't since the theme CSS should load first, so your own code is last in order). You can try using a different class and adding the color information there. You can also check if that is the case by adding an !important next to your rule and see if the colors displayed are the ones you need.

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes