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

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

@silenceclothing change your button html first like this: Knappetikett 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…

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

White border around button + animation

Store Design

rajweb January 15, 2025, 11:45am 10

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

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

White border around button + animation

Related topics