White border around button + animation

Store Design
21

@silenceclothing

Please add the following code to your assets/base.css bottom of the file.

.banner__buttons .button:before {
    box-shadow: none !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}

.banner__buttons .button:after {
    box-shadow: none !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}

 .banner__buttons .button[aria-disabled='true'] {
cursor: not-allowed;
    opacity: 1 !important;
}

Thanks!

22

thanks, after the button is filled, ist starts adding a layer bak to the left so it removes the text. Is it possible to make it stop doing this. So it just stays colored after fully button is filled? also, how do i make the border and text inside fully white?

23

@silenceclothing

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

24

i need the text to turn from white to black when the button starts filling white.

25
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

26

And remove the first code i added ?

27

No

28

why is the border and text grey/transparent and not fully white? also, why is there a black line that goes fron and back inside the button?

29

@websensepro

30

@DaisyVo do you know how?