Expanse Theme - Change Button Hover Color

[saraki]

Hello

I would like to make all buttons transparent with a black border and give them a hover color. 

Right now some buttons have a hover color, some section buttons don't and the cart button doesn't either. 

I would like to have a code where I can go back and easily change the colors for the buttons with hex color codes, the border thickness, text color, as well as text font and size… as I like to change things up every now and then 🙂

My website: www.inibo.co

PW: secret

Would love some help with this, thank you!
S.

[Dan-From-Ryviu · Accepted solution]

Please update the code to this. 

<style>
body .page-container .main-content .hero__link .btn {
   background-color: #fff!important;
}
body .page-container .main-content .btn {
background-color: transparent !important;
color: #292929 !important;
border: 1px solid #292929 !important;
}
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
border: 1px solid 1px solid transparent !important;
}
</style>

[saraki · Accepted solution]

This still isn't working. Now the prices are only showing on hover and the hero button is still white on hover.

I managed to adjust your code to something that seems to work, and it looks like this: 

<style>

body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {

background-color: #fff!important;

border: unset !important;

}

body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn:hover {

background-color: #D5CDDC !important;

color: #292929 !important;

border: 1.7px solid 1.7px solid transparent !important;

}

body .page-container .main-content .btn,

.promo-grid__product-text .type-product__labels .type-product__label {

background-color: transparent !important;

color: #292929 !important;

border: 1.7px solid #292929 !important;

font-family: 'Avenir Next' !important;

font-weight: bold !important;

text-transform: uppercase !important;

font-size:13px !important;

letter-spacing: 0.1rem !important;

}

.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { background-color: transparent !important; border: unset !important; }

body .page-container .main-content .btn:hover {

background-color: var(--colorBtnPrimary) !important;

color: #ffffff !important;

border: 1.7px solid 1.7px solid transparent !important;

}

 .promo-grid__product-text .type-product__labels .type-product__label {

background-color: #D5CDDC !important; 

border: unset !important;

text-transform: none !important;

font-weight: 100 !important;

font-size:14px !important; 

}

.megamenu__featured .grid-product__actions .quick-add-btn .btn {

background-color: transparent;

color: #292929;

border: 1.7px solid #292929;

}

.megamenu__featured .grid-product__actions .quick-add-btn .btn:hover {

background-color: #292929 !important;

color: #fcfcfa !important;

}

</style>

Thanks @Dan-From-Ryviu for helping me get there!
The labels are now solid without hover color, the prices are normal, the buttons are transparent with border and a hover color and the hero button is solid white with a hover color.

[Dan-From-Ryviu]

Hi @saraki 

You can try to add this code to your theme.liquid file before </head> tag to check

<style>
body .page-container .main-content .btn {
background-color: transparent !important;
color: #292929 !important;
border: 1px solid #292929 !important;
}
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
}
</style>

[saraki]

Thanks @Dan-From-Ryviu it's working! Is it possible to remove the border on hover? 
And, I am realising that buttons over darker images cannot be transparent, or the text must be white. Do you have a solution for this? Thank you!

[Dan-From-Ryviu]

Please update code to this one 

<style>
body .page-container .main-content .btn {
background-color: transparent !important;
color: #292929 !important;
border: 1px solid #292929 !important;
}
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
border: unset !important;
}
</style>

[saraki]

Great, thank you @Dan-From-Ryviu !
And what about the buttons over images in the hero sections? The buttons over darker images cannot be transparent, I would like to keep them solid white plus the hover color. Do you have a solution for this? Thank you

[saraki]

Oh and… can the button hover size be the same as the button with the border? Because the whole section moves and shrinks slighty when hovering over the button as it is gets a bit smaller. 

update: I was able to fix this

[Dan-From-Ryviu · Accepted solution]

Please update the code to this. 

<style>
body .page-container .main-content .hero__link .btn {
   background-color: #fff!important;
}
body .page-container .main-content .btn {
background-color: transparent !important;
color: #292929 !important;
border: 1px solid #292929 !important;
}
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
border: 1px solid 1px solid transparent !important;
}
</style>

[saraki]

Nice, that's it! Thank you so much for your help @Dan-From-Ryviu 

[Dan-From-Ryviu]

You are very welcome @saraki 

[saraki]

Sorry @Dan-From-Ryviu there is something else.

Can we do the same for the label color and text?

And I just noticed that the hero code also affects the slide sections which I don't want. Can we block it there so the buttons remain transparent with border?

[saraki]

@Dan-From-Ryviu 
The code is like this now. Everything looks great except for the slide sections (split optional slide sections) are solid white instead of transparent with border and the labels are black with black text.

<style>
body .page-container .main-content .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
body .page-container .main-content .btn {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
</style>

[Dan-From-Ryviu]

Hi @saraki 

Please update code to this 

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
body .page-container .main-content .btn {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
</style>

[saraki]

Hey @Dan-From-Ryviu 
Thanks. Now the slide sections are good but the hero button background stays white on hover….

update: I think I fixed it?

Shall I post a new question about the label colors and label text colors or can you help me with this here?

[Dan-From-Ryviu]

Let me check and I will help you here

[saraki]

Okay great, thanks Dan

[Dan-From-Ryviu]

Please update code to this and check

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
body .page-container .main-content .btn,
.promo-grid__product-text .type-product__labels .type-product__label:first-child {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
.promo-grid__product-text .type-product__labels .type-product__label:first-child:hover,
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
</style>

[saraki]

Thank you @Dan-From-Ryviu , but the ones with a white color theme now have the price inside the label…. 🤔  Seems like if there is no label, the price goes inside the label. It didn't do this before.
And I don't need a hover color for the labels. Just a fill color that isn't automatically the same as the button color. You know what I mean?

[Dan-From-Ryviu]

Price was using the same class with label. Please update code to this 

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { background-color: #fcfcfa !important; border: unset !important; }
body .page-container .main-content .btn,
.promo-grid__product-text .type-product__labels .type-product__label {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary:hover {
color: #292929 !importantl
background-color: #fcfcfa !important;
}
.promo-grid__product-text .type-product__labels .type-product__label:hover,
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
</style>

[saraki]

Hey @Dan-From-Ryviu This isn't working either.

Now the prices have a hover color and the products without a label still have the price inside the label where there shouldn't be a label. 

So what I would like is for the labels to have a solid color that I can choose. Right now it's copying the button color setting. The labels do not need a hover color. 
Please check again, thanks so much. 

[Dan-From-Ryviu]

A little mistake in code, please update it 

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { 
background-color: #fcfcfa !important; 
border: unset !important; 
}
body .page-container .main-content .btn,
.promo-grid__product-text .type-product__labels .type-product__label {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary:hover {
color: #292929 !important;
background-color: #fcfcfa !important;
}
.promo-grid__product-text .type-product__labels .type-product__label:hover,
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
</style>

[saraki]

@Dan-From-Ryviu 

I've got the code like this now, see below. I learned that the secondary label is the price and I changed the background to transparent.

Now how do I change the (primary?) labels to a solid color? I don't want them to look exactly like the transparent buttons. Thank you

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn:hover {
background-color: #ffb3a7 !important;
color: #292929 !important;
border: 1.7px solid 1.7px solid transparent !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { background-color: transparent !important; border: unset !important; }
body .page-container .main-content .btn,
.promo-grid__product-text .type-product__labels .type-product__label {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { background-color: transparent !important; border: unset !important; }
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}

</style>

[Dan-From-Ryviu]

Did you try to use code I sent above? 

[saraki]

I found another problem

The product in the mega menu has a quick add button on the top right that is black. It should also be transparent with border and black background with a white plus sign in side. 

Here is a screenshot 

Should look like this:

And like this on hover

[Dan-From-Ryviu]

Please update code and check 

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { 
background-color: #fcfcfa !important; 
border: unset !important; 
}
body .page-container .main-content .btn,
.promo-grid__product-text .type-product__labels .type-product__label {
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary:hover {
color: #292929 !important;
background-color: #fcfcfa !important;
}
.promo-grid__product-text .type-product__labels .type-product__label:hover,
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
.megamenu__featured .grid-product__actions .quick-add-btn .btn {
background-color: transparent;
color: #292929;
border: 1.7px solid #292929;
}
.megamenu__featured .grid-product__actions .quick-add-btn .btn:hover {
background-color: #292929 !important;
color: #fcfcfa !important;
}
</style>

[saraki]

The mega menu product is good now thank you @Dan-From-Ryviu .
But the labels are still transparent with border and hover color. I DO NOT want them to act like the buttons because they are not buttons. Please make them a solid color, no hover color. I've been trying to figure out how to change the code for this but it's beyond me…. 

[Dan-From-Ryviu]

Please update code to this and check

<style>
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #fff!important;
border: unset !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { 
background-color: #fcfcfa !important; 
border: unset !important; 
}
body .page-container .main-content .btn{
background-color: transparent !important;
color: #292929 !important;
border: 1.7px solid #292929 !important;
font-family: 'Avenir Next' !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size:13px !important;
letter-spacing: 0.1rem !important;
}
.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary:hover {
color: #292929 !important;
background-color: #fcfcfa !important;
}
.promo-grid__product-text .type-product__labels .type-product__label,
body .page-container .main-content .btn:hover {
background-color: var(--colorBtnPrimary) !important;
color: #ffffff !important;
border: 1.7px solid 1.7px solid transparent !important;
}
.megamenu__featured .grid-product__actions .quick-add-btn .btn {
background-color: transparent;
color: #292929;
border: 1.7px solid #292929;
}
.megamenu__featured .grid-product__actions .quick-add-btn .btn:hover {
background-color: #292929 !important;
color: #fcfcfa !important;
}
</style>

[saraki · Accepted solution]

This still isn't working. Now the prices are only showing on hover and the hero button is still white on hover.

I managed to adjust your code to something that seems to work, and it looks like this: 

<style>

body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {

background-color: #fff!important;

border: unset !important;

}

body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn:hover {

background-color: #D5CDDC !important;

color: #292929 !important;

border: 1.7px solid 1.7px solid transparent !important;

}

body .page-container .main-content .btn,

.promo-grid__product-text .type-product__labels .type-product__label {

background-color: transparent !important;

color: #292929 !important;

border: 1.7px solid #292929 !important;

font-family: 'Avenir Next' !important;

font-weight: bold !important;

text-transform: uppercase !important;

font-size:13px !important;

letter-spacing: 0.1rem !important;

}

.promo-grid__product-text .type-product__labels .type-product__label.type-product__label--secondary { background-color: transparent !important; border: unset !important; }

body .page-container .main-content .btn:hover {

background-color: var(--colorBtnPrimary) !important;

color: #ffffff !important;

border: 1.7px solid 1.7px solid transparent !important;

}

 .promo-grid__product-text .type-product__labels .type-product__label {

background-color: #D5CDDC !important; 

border: unset !important;

text-transform: none !important;

font-weight: 100 !important;

font-size:14px !important; 

}

.megamenu__featured .grid-product__actions .quick-add-btn .btn {

background-color: transparent;

color: #292929;

border: 1.7px solid #292929;

}

.megamenu__featured .grid-product__actions .quick-add-btn .btn:hover {

background-color: #292929 !important;

color: #fcfcfa !important;

}

</style>

Thanks @Dan-From-Ryviu for helping me get there!
The labels are now solid without hover color, the prices are normal, the buttons are transparent with border and a hover color and the hero button is solid white with a hover color.

[Dan-From-Ryviu]

You are very welcome. 

[saraki]

Hey @Dan-From-Ryviu 
Sorry to bother you again. 
The password page buttons are all black as well… can you give me a code to add for this?

Thank youu!

[Dan-From-Ryviu]

Please go to your Online store > Themes > Edit code > Assets > open password.css file, add this code at the bottom 

#LoginModal .modal__inner #login_form .password-form__submit { color: #fcfcfa; }

Also thank you for the coffee. 

[saraki]

@Dan-From-Ryviu I've only got password.liquid and password.json. Will it work in one of these?

[Dan-From-Ryviu]

So please add this code to password.liquid before </head> tag

.modal__close .icon,
#LoginModal .modal__inner #login_form .password-form__submit { color: #fcfcfa; }

[saraki]

@Dan-From-Ryviu Did you check it? I don't think it's working

[Dan-From-Ryviu · Accepted solution]

Sorry, forgot to add code in <style>

<style>
.modal__close .icon,
#LoginModal .modal__inner #login_form .password-form__submit { color: #fcfcfa; }
</style>

[saraki]

Ah now this works, thank you so much! 👏@Dan-From-Ryviu 

[Dan-From-Ryviu]

Glad I could help

[saraki]

Hi @Dan-From-Ryviu 

I have got the following code for the buttons of my hero section: 

body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn {
background-color: #292929!important;
color: #ffffff !important;
border: 1.7px solid transparent !important;
}
body .page-container .main-content #shopify-section-template--16224083902643__1661938070ffcda44e .hero__link .btn:hover {
background-color: #ffffff !important;
color: #292929 !important;
border: 1.7px solid transparent !important;
}

Could you please share the first two lines for the Video Hero section and the Promotion Grid section so that I can add them to my theme.liquid?

(Both these sections also have the button over an image that isn't visible when the button is transparent with black border and black text.)

Thank you so much

S.

[Made4uo-Ribe]

Hi @saraki 

You can customize all your buttons but following the instructions below. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "button.css". Paste the code at the very bottom of the file

#MainContent .btn, #MainContent .rte .btn,#MainContent .shopify-payment-button .shopify-payment-button__button--unbranded,#MainContent  .spr-container .spr-button,#MainContent  .spr-container .spr-summary-actions a {
    background: transparent;
    border: 1px solid #000;
    color: #000;
}


#MainContent .btn:hover , 
#MainContent .rte .btn:hover ,
#MainContent .shopify-payment-button .shopify-payment-button__button--unbranded:hover ,
#MainContent  .spr-container .spr-button:hover ,
#MainContent  .spr-container .spr-summary-actions a:hover {
    background: var(--colorBtnPrimary);
    border: 1px solid transparent;
    color: #000;
}

• And Save. 
• Result:
• 

You can go back to same file, button.css,  if you want to change it. For changing the font, the code is in the mixin.css under the same folder, Asset folder. But if you want to override the font, you can still paste the code at the button.css. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[saraki]

Hi @Made4uo-Ribe 
There is no button.css in the Assets folder or anywhere… how did you do it?

[Made4uo-Ribe]

Oh. My bad, it might be from a flickity external library you are using. You can use the base.css instead. For some reason, I do see the button works already?

[saraki]

Yes I tried the other recommendation from Dan..
There still are some adjustments needed though.

[saraki]

I'll try your code and see how it looks.. 🙂

[saraki]

Never mind, there is no base.css either.