How can I change button fill animation across my entire site?

Store Design
, ,
1

I would like for the buttons across the entire site to fill at once when hovered over (like they do on this site: https://thearrivals.com/) and not with the gradual left to right gradient as it currently is - can anyone help to target this with code? Not having luck, thank you in advance!

url: https://afca7f-2.myshopify.com/

1 Like
2

Go to your online store → customize → settings → custom css
and paste this code in the custom css section

.btn.btn–secondary.btn–overlay:before, .spr-button-primary.btn–overlay:before {
display: none !important;

}

3

Thank you, that did not work to achieve what I need though. The buttons still fill from left to right when hovered on though and I want to remove that. This is an example website of button fill we are trying to emulate: https://thearrivals.com/

4

Hi @blakelyhi

Try this one.

  • 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 “base.css, style.css or theme.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:
.btn.btn--primary.btn--overlay:after, .shopify-challenge__button.btn--overlay:after {
    background-color: white !important;
}
  • And Save.

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

5

Hi @blakelyhi

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.btn.btn--primary.btn--overlay:after, .shopify-challenge__button.btn--overlay:after {
    background-color: #fff !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

6

Thanks but that did not achieve what I need. I don’t mind the fill color so much as the animation of the fill (the clip in from left to right) - so now unless every button is the color specified in the code, I still see that white background clip in which is what I’m trying to eliminate.

7

Thanks but that did not achieve what I need. I don’t mind the fill color so much as the animation of the fill (the clip in from left to right) - so now unless every button is the color specified in the code, I still see that white background clip in which is what I’m trying to eliminate.

8

Hi @blakelyhi Please help me replace the code above with this one:

.btn.btn--primary.btn--overlay:hover ::before,.btn.btn--primary.btn--overlay:hover ::after, .shopify-challenge__button.btn--overlay:hover ::before,.shopify-challenge__button.btn--overlay:hover ::after{
    background-color: #fff !important;
}