Changing Color of

[RuvimAAA]

Hi guys, I'm new with Shopify and have no clue how to code. I looked into it but it's just a maze. In short, I need help changing the colors of a button and an object without altering the entire theme's colors. In picture one that I've attached, you can see how I want the things to look, white button with grey text and white line on top. However, in doing so by using the theme accent color changer, it also changes the color of other buttons and lines throughout the site to also be white. So in the first picture, the top two circled items are how I want them but the bottom circle line is now lost in the background. How can I keep the top two circled items white but keep the theme's primary accent color as #1DEDFF? Can someone help with this?

Button color, top line and text color is all correct, however lower button is now also white and disappears into the background. I need the top two circled items the way they are but the bottom circled items needs to be that blue color as seen in the second picture.Here I've changed the color to blue and now the two top items are lost into the picture and looks bad but the bottom circled item is good.

[dmwwebartisan]

@RuvimAAA 

Please share your website URL. I will check and provide a solution here.

Thanks!

[oscprofessional]

Hello RuvimAAA,
Please share your site url.
So that i can check and let you know the exact solution here.

[RuvimAAA]

Hi, @oscprofessional 

https://the-fluffy-plushie.myshopify.com/

I need to make that top line and button white with dark grey text while keeping the entire sites "primary accent" color as #1DEDFF

[oscprofessional]

Hello RuvimAAA,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-1486584613697 .hero__overlay-title::before {
    background-color: white!important;
}
#shopify-section-1486584613697 .btn.hero__btn {
    background-color: white;
    color: #4a4a4a;
}

[RuvimAAA]

Is there a way to get rid of the blue outline on the button? And just have a white button that gets slightly bigger on hover?

[oscprofessional]

 

Hi is this button you are talking about?

[RuvimAAA]

Yes, but viewing the screenshot you attached I believe it’s blending into the blue background and you aren’t able to see it. 
There’s a blue outline around the button that gets bigger when you hover over it with the mouse. Could we make it also white? That way the button appears to simply become bigger rather then just a blue outline around it. 
Btw thanks a TON for that first line of code, made me able to keep things looking so much nicer, really appreciate that!

[oscprofessional · Accepted solution]

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.btn::after, .shopify-payment-button .shopify-payment-button__button--unbranded::after, .btn--secondary::after {
    outline: 2px solid #fff !important;
}