Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
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>
If it’s helpful for you, please let me know by giving it a like or marking it as a solution!
PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.
All features are available from Free plan. Let’s create unique website design with PageFly here.
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
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
If it’s helpful for you, please let me know by giving it a like or marking it as a solution!
PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.
All features are available from Free plan. Let’s create unique website design with PageFly here.
Thank you this worked but then I lose the top border of several of my buttons on the mobile version. See below:
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>
If it’s helpful for you, please let me know by giving it a like or marking it as a solution!
PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.
All features are available from Free plan. Let’s create unique website design with PageFly here.
User | RANK |
---|---|
176 | |
157 | |
76 | |
31 | |
31 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023