How can I change a specific button color in Dawn theme?

[tourbrandus]

Hi! 

I am looking to change this specific "SHOP ALL" button color on my homepage to #9CFF00 and add a 1pt black outline. I know it is a primary button but I do not want to change all of them just this specific one. Can't seem to figure it out. 

[oscprofessional · Accepted solution]

Hello @tourbrandus 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

a.button.button--primary {
    background: #9cff00 !important;
    border: 1px solid black !important;
}

[Made4uo-Ribe]

Hi @tourbrandus , 

If you know a little bit coding you can call specific selector on the page. 

And If not would you mind sharing your website with password?

Thanks!

[tourbrandus]

Website: www.tourbrand.us

password: task1data

[Made4uo-Ribe · Accepted solution]

Hi @tourbrandus ,

Thank you for the information. 

Try this code. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "theme.scss.liquid, styles.scss.liquid or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

section#shopify-section-template--18969633227073__image_banner a.button.button--primary {
    border: 1px solid black;
    background-color: #9CFF00;
}

Result: 

NOTE:

You can change anytime the sizes and the color. 

I hope it help. 

[tourbrandus]

This worked thank you. 

Now when I hover over the button with my cursor the outline is white. Is there any way to alter that?

[Made4uo-Ribe]

Yes, we can try this code. 

a.button.button--primary:hover {
    border: 1px solid black;
}

Same instructions, Thanks!

[Zqdo]

In your customizer, on the homepage, click on this specific section, and scroll down to where it says Add Custom CSS. Type this in:

.button{
  background: #9cff00;
  border: 1px solid #000000;
}

Does this work?

[SAN_MSWEB]

Hi @tourbrandus 

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:

.banner__content .banner__buttons .button {color: #9CFF00 !important;border: 1px solid #000 !important;}

Regards,

San

[ZestardTech]

Hello @tourbrandus ,

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:

.banner__buttons .button.button--primary {
    background-color: #9CFF00;
    border: 1px solid black;
}

[oscprofessional · Accepted solution]

Hello @tourbrandus 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

a.button.button--primary {
    background: #9cff00 !important;
    border: 1px solid black !important;
}