Border width on buttons - Dawn Theme

[tahliamotteram]

Hi I have used various code in the Dawn theme to ensure all buttons are the same (outline black only), but now I have some buttons that are a thicker border than others. I would like them all to be a thinner border.

This is my website:

https://www.zukabeauty.com.au/

This is the code I have used:

.button{color: #4C4C4D;}
.button:before, .button:after, .button:hover:after{box-shadow:none; border: 0.25px solid #4C4C4D;}

a.button.button--primary {

background: transparent !important;

}

.button:hover{
background: #F9E6E0;
color: #4C4C4D;
}

a.button.button--primary:hover {
background-color: #FFF5F0 !important;
}

a.button.button--primary {
border: 0.25px solid #4C4C4D;
}

a.button.button--secondary {
border: 0.25px solid #4C4C4D;
}

This is the thicker border I would like to be the same as the other thinner borders:

[GemPages]

Hello @tahliamotteram 

You can try to add the below code:

.button:before, .button:after, .button:hover:after{
  border: none
}

I hope my solution can work and support for you.

Best regards,
GemPages Support Team

[PageFly-Victor]

Hi @tahliamotteram 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

<style>

a.button.button--primary, a.button.button--secondary {

   border: 0px solid #4C4C4D !important;

}

</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[tahliamotteram]

Thank you this worked but then I lose the top border of several of my buttons on the mobile version. See below:

[PageFly-Victor · Accepted solution]

help me add this code so it only works on desktop 

<style> 
@media screen and (min-width: 998px){
a.button.button--primary, a.button.button--secondary { 
border: 0px solid #4C4C4D !important; 
} 
}
</style>