How to remove a specific button border in Dawn theme?

Store Design
,
1

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
Screen Shot 2023-03-05 at 11.16.45 PM.png1612×252 81.1 KB

.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

1 Like
2

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

3

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

4

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;
}
5

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

6

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,

7

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;
}
8

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

2 Likes