3 Click-Worthy Button Hover Effects | Shopify

[@BL_Creative]

Thanks for watching! Checkout more Button customization videos:
How to Add Gradient to Your Shopify Buttons (Step-By-Step) 👉🏽 th-cam.com/video/YIkclLUbzLw/w-d-xo.html
How to Change the Button and Badge Text in Shopify 👉🏽 th-cam.com/video/oiKqIB9zQIc/w-d-xo.html
How To Create Custom Button Styles In Shopify | Easy CSS 👉🏽 th-cam.com/video/ynlN4CzmEhc/w-d-xo.html

[@Cruzfr]

Hi Betsy,
I’m trying to add a swipe effect to the "SHOP ALL" button on my image banner. I want the button to have a white background with black text initially, and when hovered over, it should swipe to a transparent background with white text and a white border.
I’m having some trouble implementing this-could you guide me on how to achieve this effect?
Thanks so much!

[@BL_Creative]

Hi @Cruzfr to make a color transparent you can to use the RGBA color instead of the HEX color. For example a white transparent would be rgba (255, 255, 255, 0) where the last digit of 0 represents the complete transparency instead of #FFFFFF. You can replace the 0 with .05 for 50% transparency, and 1 is complete opaque. Hope that helps!

[@univers8sound8quality]

hey betsy how can i apply it on aurora theme?

[@BL_Creative]

Yes, you can apply these effects in any theme. You just need to use the inspect tool to target the buttons for the specific theme. You can always reach out to me via my services page if you need further assistance.

[@kimmyjay-h1j]

Hey Betsy! Is there a way you can change the “Swipe Color Effect” to go up and down, instead of going left to right? Thanks so much! ☺️

[@BL_Creative]

Thank you for the question. Replace these 2 lines of code:
#1 Replace:
background: linear-gradient(to left, #000 50%, #fff 50%) right !important;
with:
background: linear-gradient(to bottom, #000 50%, #fff 50%) bottom !important;
#2 Replace:
background-position: left !important;
with:
background-position: top !important;
Don't forget to change the #hex colors, and let me know if it worked for you 🙌

[@kimmyjay-h1j]

Hey Betsy! Thanks so much for getting back to me - I really appreciate you taking the time to help! Unfortunately, the issue is still sticking around. ☹️
After editing/replacing the code like you suggested, the button had a split-color to it. Half of the button was blue (#084875) and half white (#ffffff), even before hovering. When hovering over it now, the transition doesn’t seem to work fully - the only thing that changes is the button text color. The background stays split in half, blue and white, just like before.
I’ll include the exact code I pasted in the custom CSS section below in case it helps:
.button {
background: linear-gradient(to bottom, #ffffff 50%, #084875 50%) bottom !important;
background-size: 200% !important;
transition: 0.5s ease-out;
color: #084875;
}
.button:hover {
background-position: top !important;
transition: 0.5s ease-out !important;
color: #ffffff;
}
Thanks again for your help - you’re awesome for putting out such GREAT content and taking the time to respond to your viewers! Hope to hear from you soon 💛

[@BL_Creative]

I'm happy to help. I just applied this code to the Studio theme 15.2 which is also a free theme and I used this code. Give it a try 🤞:
.button {
background: linear-gradient(to bottom, #ffffff 50%, #084875 50%) bottom !important;
background-size: 100% 200% !important;
transition: 0.5s ease-out !important;
color: #fff;
}
.button:hover {
background-position: top !important;
transition: 0.5s ease-out !important;
opacity: 1 !important;
color: #084875;
}

[@kimmyjay-h1j]

@@BL_Creative Hey Betsy! Thank you so much for sharing the code - it worked PERFECTLY! I really appreciate your help and generosity! 💕

[@amrixtha]

Hey Betsy, I tried your swipe hover code and it worked great except for 1 thing. After it turns the second colour, there's a small loading circle displayed on it after the button is clicked. Please tell me how to fix that, thanks!

[@BL_Creative]

What theme are you using? and is the button linked to a page? thanks

[@amrixtha]

@@BL_Creative I'm using the craft theme. And it's the 'add to cart' button on the product page

[@BL_Creative]

Try adding this to the end of the custom css for those products:
.loading__spinner {
display: none !important;
}
Hope this helps!

[@amrixtha]

@@BL_Creative Yess. No loading icon now. Thankyou!

[@BL_Creative]

My pleasure! Have a great day.

[@AyoubKerrastaz]

"Hi, thanks for your video! I installed this theme but in the slideshow, I can't change the hover background color of the button, how should I do it?"

[@BL_Creative]

Hi, thanks for the question. You could try these code below but I would advise to use the Inspect tool to ensure that you are targeting the correct class or ID.
.slideshow__button:hover {
background-color: #hex-color;
color: #hex-color;
}
or
.slideshow-button-selector {
background-color: #hex-color;
color:#hex-color;
}
Let me know if these not work and I can create a video for it.🙌