Expanse Theme - Change Button Hover Color

Store Design
,
1

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 :slightly_smiling_face:

My website: www.inibo.co

PW: secret

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

1 Like
2

Hi @saraki

You can try to add this code to your theme.liquid file before tag to check
3

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;
}

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!

4

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

5

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?

6

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!

7

Please update code to this one
8

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

9

I’ll try your code and see how it looks.. :slightly_smiling_face:

10

Never mind, there is no base.css either.

11

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

12

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

13

Please update the code to this.
14

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

1 Like
15

You are very welcome @saraki

16

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?

17

@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.

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; }
18

Hi @saraki

Please update code to this
19

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?

20

Let me check and I will help you here