Adding a border to all solid background buttons

Solved
tourbrandus
Excursionist
14 0 6

Hello, 

 

I have a few buttons on my website that have a 1.5px solid black border and I want to add the same to the rest of the buttons that are the same color including the checkout and buy it now button. 

 

Is this something editable in the themes or will it need to be coded in?

 

Website: tourbrand.us

password: task1data

 

Screen Shot 2023-05-31 at 11.33.02 AM.png

 

Screen Shot 2023-05-31 at 11.33.09 AM.png

 

Example of what I want:

Screen Shot 2023-05-31 at 11.36.39 AM.png

 

Accepted Solution (1)
NomtechSolution
Trailblazer
1245 111 139

This is an accepted solution.

  1. Add the border style: Once you've identified the button styles, add the following CSS rule to apply a 1.5px solid black border:

 

.button {
  border: 1.5px solid black;
}

 

Chat on WhatsApp: +923246370042
Need a Shopify developer? noumanmasood64@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

View solution in original post

Replies 4 (4)
tourbrandus
Excursionist
14 0 6

Also this continue shopping button. Screen Shot 2023-05-31 at 11.39.10 AM.png

NomtechSolution
Trailblazer
1245 111 139

This is an accepted solution.

  1. Add the border style: Once you've identified the button styles, add the following CSS rule to apply a 1.5px solid black border:

 

.button {
  border: 1.5px solid black;
}

 

Chat on WhatsApp: +923246370042
Need a Shopify developer? noumanmasood64@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
tourbrandus
Excursionist
14 0 6

Hello this worked but now has a thin white outline between the black and green. 

How would I go about fixing this?

 

Screen Shot 2023-05-31 at 3.27.33 PM.png

 

Moeed
Shopify Partner
2461 621 741

Hey @tourbrandus 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
button {
    border: 1px solid black !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

- Expert in Shopify SEO optimization for higher search rankings.


- Your Coffee Tip , my code - a perfect blend! ❤️