How to remove a specific button border in Dawn theme?

BaskHour
Tourist
7 0 2

Hi,
I've been using the Dawn theme to build my page and have been trying to get rid of a white border around my buttons in my image banner section. However, it doesn't seem like an actual border. The real border is brown that goes on top of the white one. While inspecting the page, I can remove the white border by checking off --border-offset, but it removes borders from all the buttons of the homepage. 

This is what it looks like for now, what could I add to fix or remove to fix this issue? 

Screen Shot 2023-03-05 at 11.16.45 PM.png

.banner__buttons>.button 

{

    background: #FCF0DB! important; 

    border-style: solid;

    border-width: 1.5px;

    border-color: #8E8072! important;

    color: #3F0314! important;

    box-shadow: 2px 2px 5px 0.5px rgba(38, 33, 21, 0.2);

    border-offset: 0px ;

}

 

Fingers crossed,
Bao

 

 

Replies 7 (7)

Moeed
Shopify Partner
3858 974 1216

Hey @BaskHour 
Kindly share your Store URL and password if enabled

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

GemPages
Shopify Partner
5589 1261 1221

Hi @BaskHour,

 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

 

Thank you and hope to hear from 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

Moeed
Shopify Partner
3858 974 1216

Hey @BaskHour 
Follow these steps to remove the border:

1) Go to Online Store
2) Edit Code
3) In Assets folder, find base.css file and add the following code in the bottom of the file.

.banner__buttons>.button {
    border: none !important;
}



 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
BaskHour
Tourist
7 0 2

Hey there, thank you for helping! However, it removes my brown border, which I want to keep but still keeps the white border 

Moeed
Shopify Partner
3858 974 1216

Hey @BaskHour 

Unfortunately, both borders are merged into each other so if I try removing one then the other one will be removed automatically. So, either you can keep them or remove both of them.
If I manage to help you then don't forget to Mark it as Solution! 

Warm Regards,

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

ZestardTech
Shopify Expert
5559 1003 1330

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.button.button--primary {
border-color: #FFF8E6!important;
}

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

kaunainkaisar
Visitor
2 0 1

Here is a simple way
Go to the code editor
Then Base.css
Then Paste this code at the bottom

 

 

.(ENTER CLASS NAME){ 
border: none; --border-opacity: none; box-shadow: none; 
}

 

 

 You can also use this in custom CSS.
Hope this helps

Founder And CEO CapitalKash