Solved

Border width on buttons - Dawn Theme

tahliamotteram
Excursionist
50 0 4

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:

 

Screenshot 2023-02-07 at 11.11.45 am.png

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1785 3053

This is an 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>

 

View solution in original post

Replies 4 (4)

GemPages
Shopify Partner
5588 1261 1206

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
tahliamotteram
Excursionist
50 0 4

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

IMG_26ABA1DFB94A-1.jpeg

PageFly-Victor
Shopify Partner
7865 1785 3053

This is an 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>

 

PageFly-Victor
Shopify Partner
7865 1785 3053

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>

 

PageFlyVictor_0-1675733948110.png

 

 

<style>

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

   border: 0px solid #4C4C4D !important;

}

</style>

 


Hope this answer helps.

Best regards,

Victor | PageFly