Dawn Theme Static Banner Button REMOVE outline

Store Design
,
1

HI!

Figured out how to change the color of my button BUT cannot seem to remove the white border. Can anyone help?

Below is the code used to change the color and it is in my base.css:

.banner__buttons>.button
{
background: #72547c! important;
color: #fafafa! important;
box-shadow: none! important;

}

2

Hey there!

I just took a look at your site and can get you pointed in the right direction. You will want to add this rule to the ones you’ve already created: --border-offset: none;

This will still have the white border when hovering over the button with the mouse. To remove this as well, you would need to add a new rule:

.banner__buttons>.button:hover:after {
–border-offset: none;
}

If you add both of these to your existing code you should end up with this:

.banner__buttons>.button {
  background: #72547c! important;
  color: #fafafa! important;
  box-shadow: none! important;
  --border-offset: none;
}

.banner__buttons>.button:hover:after {
  --border-offset: none;
}

Hopefully that helps you out!

3

Hi @alexis11 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
4

Hi @alexis11

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file and remove previous css:

.banner–desktop-transparent .button–secondary {background: #72547c! important;color: #fafafa! important;box-shadow: none! important;}

.banner–desktop-transparent .button:after {box-shadow: none !important;}

Regards,

San

5

YES!!! Thank-you. :slightly_smiling_face:

:raised_hand:

6

Hi… ok: so now the button doesn’t do anything once hovered over and I have 3 differently behaving buttons on the site. boo. what can i do to make all the buttons the same: color = #72547C, text = #fafafa, no outline… then when hovered over a thin outline of the button #fafafa… can you help?