Dawn Theme: Change Button Text Color + Change menu color only for mobile

[PuaHome]

Hi all,

I have 2 questions I really can not solve.

1. I want to change the text color of the buttons (Landing page, product page, cart,...) but the footer color needs to stay the same.

Normally you can change everything in your theme settings, but if i change the button color the footer color changes too. I will attach a screenshot.

2. How can I change the background and footer color of my mobile view without changing the normal background color? Is that possible? I attached a screenshot as well.

Website: pua-home.com

Thank you in advance!

Ronny

[ZestardTech]

Hello There,

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

.button, .button-label, .customer button,
.shopify-challenge__button {
color: white;
}
a#cart-notification-button {
color: black;
}

nav.menu-drawer__navigation {
background: #eae7e0;
}

[diego_ezfy · Accepted solution]

@PuaHome,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
:root {
  --custom-button-color: #ccc;
  --custom-button-text: #fff;
}

.button,
.button:active,
.button:focus{
    background: var(--custom-button-color) !important;
    color: var(--custom-button-text)  !important;
    border-color: var(--custom-button-color)  !important;
      box-shadow: 0 0 0 .1rem var(--custom-button-color)  !important;
}


.button:hover{
    box-shadow: 0 0 0 .2rem var(--custom-button-color)  !important;
}

@media (max-width: 749px){
    body{
    background: #c2c2c2 !important;
    }
    
    .footer{
background: #c1c1c1 !important;

    }
}

</style>

You can change the values as per your wish:

#ccc = buttons color

#fff = buttons text color

#c2c2c2 = website's background color (mobile only)
#c1c1c1 = footer background color (mobile only)


Kind regards,
Diego

[PuaHome]

@diego_ezfy Thank you so much, it worked! 

[LucyStitch]

This helps, but is not the 100% solution to my problem.
I would want the "add to cart" button to stay as it is and would need the "buy now" to have a different font color.

How can I incorporate that into the code?