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? [silenceclothing_0-1736940386189.png]

Hi @silenceclothing @silenceclothing Go to Online Store → Theme → Edit code. Open your theme.liquid file 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! …

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

https://xstl3mwcp89lqx6e-65389560005.shopifypreview.com

@silenceclothing Go to Online Store → Theme → Edit code. Open your theme.liquid file 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.s…

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; transitio…

@silenceclothing , You can add the CSS: Follow these Steps: Online Store Themes Edit Code Click on theme.css.liquid or styles.css.liquid (depending on your theme) under the Assets folder to open the CSS file. Paste the provided CSS at the end of the file Thanks

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? [silenceclothing_0-1736941236221.png]

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

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 tag. Save the changes. Thanks

did not work. this text comes in the top? [silenceclothing_0-1736941910532.png]

White border around button + animation

Store Design

rajweb January 15, 2025, 11:31am 3

Hello @silenceclothing ,

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

Best Regards,

Rajat

Topic		Replies	Views
white border around transparent button Store Design design , customizations , css	4	86	January 14, 2025
Change button and border color Store Design design , customizations , css	4	84	February 5, 2025
Customization banner button Store Design design , customizations , landing-page , shopify-themes	4	79	November 20, 2024
How can I change button fill animation across my entire site? Store Design design , customizations , css	7	106	November 13, 2023
Transparent button, with white border smooth transition from left to right when hover Store Design design , customizations , css	6	68	January 10, 2025

White border around button + animation

Related topics