White border around button + animation

[silenceclothing]

hello. I want to make this button transparent with a white border around + an animation that starts on hover so the button starts to fill white smooth from left to right. Can someone please help me with this?

[websensepro]

Hi @silenceclothing , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[rajweb]

Hello @silenceclothing ,

Could you please share your store URL and password so I can continue assisting you?

Best Regards,

Rajat

[silenceclothing]

https://xstl3mwcp89lqx6e-65389560005.shopifypreview.com

[rajweb]

To achieve the transparent button with a white border and the smooth left-to-right fill animation on hover, you can use the following CSS:

.button--primary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.button--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.4s ease;
}

.button--primary:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button--primary:hover {
    color: black; /* Change text color on hover if desired */
    border-color: black; /* Change border color if desired */
}

This should give you the desired button effect. Just add this CSS to your theme's stylesheet or custom CSS section, and it should work!

[rajweb]

@silenceclothing ,

You can add the CSS:

Follow these Steps:

1. Online Store

2. Themes 

3. Edit Code

4. Click on theme.css.liquid or styles.css.liquid (depending on your theme) under the Assets folder to open the CSS file.

5.  Paste the provided CSS at the end of the file

Thanks

[silenceclothing]

Hello. 

My custom css option in theme editor is full. Is there a other place i can insert the code?

[rajweb]

You can add the CSS by following these steps:

- Go to Online Store -> Themes -> Edit code.

- Open theme.liquid. Paste the CSS code before the </head> tag.

Save the changes.

Thanks

[silenceclothing]

did not work. this text comes in the top?

[silenceclothing]

this is how i want it https://vimeo.com/1047105322/2210b31e8e?share=copy

[websensepro]

@silenceclothing 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.banner__buttons {
    border: 2px solid #ffff !important;
    background: transparent !important;
}
</style>

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! 🚀 (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!

[silenceclothing]

Hello, and thanks for the reply!

It made the button have a white border, but i also want a animation that makes the button starts to fill from left to right when hover, can you do that?

[Ahmad31]

@silenceclothing change your button html first like this:

<a role="link" aria-disabled="true" class="button">
  <span class="text">Knappetikett</span>
</a>

then apply style code :

.text {
  display: inline-block;
  position: relative;
  transform: translateX(0);
  transition: transform 0s ease-in-out, opacity 0s ease-in-out;
}

.button:hover .text {
  opacity: 0; /* Hide text */
  transform: translateX(-100%); /* Move text to the left */
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  animation: slide-in 0.3s ease-in-out 0.1s forwards; /* Slide text in after 0.1s */
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

these changes apply animation on button text hover, moves text from left to right on hover 

[silenceclothing]

where do i replace my button html? and where do i insert the other code?

also i dont mean the text to move on hover. in mean the text to go from transparent to start filling with color.. 

for refference, go to : notresucces.com

[silenceclothing]

https://vimeo.com/1047105322/2210b31e8e?share=copy

this is how i want it

[silenceclothing]

@websensepro 

[silenceclothing]

this is how i want it:

https://vimeo.com/1047105322/2210b31e8e?share=copy

[websensepro · Accepted solution]

Hi @silenceclothing 

@silenceclothing 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
a.button.button--primary:hover {
    color: black !important;
}
a.button.button--primary {
    position: relative;
    color: black;
    background: transparent;
    border: 3px solid white;
    overflow: hidden;
}
a.button.button--primary::after, a.button.button--primary::before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    background: #ffff !important;
    z-index: -1;
}
a.button.button--primary::before {
    transform: translateX(-100%);
}
a.button.button--primary:hover:before {
  transform: translateX(0);
  transition: transform 350ms ease;
}
a.button.button--primary::after {
   z-index: 0;
  transform: translateX(100%);
  transition: none;
  transition: transform 350ms ease;
}
a.button.button--primary:hover:after {
  opacity: 1;
  transform: translateX(0);
 transition: transform 350ms 360ms ease;
}
</style>

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! 🚀 (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!

[silenceclothing]

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?

[websensepro]

@silenceclothing 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
a.button.button--primary::after, a.button.button--primary::before {
    z-index: -1 !important;
}
</style>

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! 🚀 (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!

[silenceclothing]

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

[websensepro]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
a.button.button--primary {
    color: #ffff !important;
}
a.button.button--primary:hover {
    color: black !important;
}
</style>

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! 🚀 (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!

[silenceclothing]

And remove the first code i added ?

[websensepro]

No 

[silenceclothing]

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?

[silenceclothing]

@websensepro 

[dmwwebartisan]

@silenceclothing 

Please provide your store URL If your store is password protected then share the storefront password also.

Thanks!

[silenceclothing]

https://xstl3mwcp89lqx6e-65389560005.shopifypreview.com

[dmwwebartisan]

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

[silenceclothing]

@DaisyVo do you know how?