Transparent button, with white border smooth transition from left to right when hover

[silenceclothing]

Hello.

Does anyone know how to do this?

[ZestardTech]

Hello @silenceclothing,

Could you please provide the URL/ password  to your store so that I can check it and provide you with the exact solution?

[silenceclothing]

https://zqlzg9l2nrsn30c9-65389560005.shopifypreview.com

[ZestardTech]

Hello @silenceclothing ,

Can you please clarify which buttons you are referring to?

[silenceclothing]

"shopp all" "login" and more

[ZestardTech]

Hello there,
Here are the steps to apply the necessary changes in your Shopify store:

• In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
• Locate Asset > base.css and paste the following code at the bottom of the file: 

body button.button--secondary, 
body .shopify-challenge__button, 
body .customer button {
    background-color: #222943;
    border: 1px solid white;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease !important;
    transform-origin: unset !important;
    transform: none !important;
}

body button.button--secondary::before, 
body .shopify-challenge__button::before, 
body .customer button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: left 0.4s ease;
    z-index: 1;
}

body button.button--secondary:hover, 
body .shopify-challenge__button:hover, 
body .customer button:hover {
    color: black;
    border-color: black;
    background-color: white;
}

body button.button--secondary:hover::before, 
body .shopify-challenge__button:hover::before, 
body .customer button:hover::before {
    left: 0;
}

body button.button--secondary span, 
body .shopify-challenge__button span, 
body .customer button span {
    position: relative;
    z-index: 2;
    background: transparent !important;!i;!;
}

[silenceclothing]

nothing happend?