3 Click-Worthy Button Hover Effects | Shopify
Boost user engagement! I'll walk you thru 3 button hover effects you can easily add to your Shopify store.
NO CODING EXPERIENCE NEEDED! Follow along and learn how to use the included code snippets (CSS) in your Theme Editor's Custom CSS.
In this video, you'll learn:
3 eye-catching button hover effects: Transform your buttons and grab attention!
Bonus! 3 additional CSS tweaks.
Timestamps ⌚️
00:00 Creative hover effects in Shopify
00:20 Effect 1- 2 Separating box-shadow colors
02:16 Effect 2- Shadow to background
03:53 Effect 3- Swipe color Effect
05:07 Bonus CSS Code
/*Separating Box Colors*/
.button:hover {
box-shadow: 5px -5px 0px COLOR, -5px 5px 0px COLOR;
transition: 0.5s ease-out !important;
}
/*Shadow to Background Color*/
.button {
box-shadow: 5px 5px 0px teal;
}
.button:hover {
box-shadow: none;
background: COLOR !important;
transition: 0.5s ease-in !important;
}
/*Swipe Effect*/
.button {
background: linear-gradient(to left, COLOR 50%, COLOR 50%) right !important;
background-size: 200% !important;
transition: 0.5s ease-out;
}
.button:hover {
background-position: left !important;
transition: 0.5s ease-out !important;
}
Related video’s to watch:
How to Add Gradient to Your Shopify Buttons (Step-By-Step) 👉🏽 • How to Add Gradient to Your Shopify Button...
How to Change the Button and Badge Text in Shopify 👉🏽 • Change the Button and Badge Text in Shopify
How To Create Custom Button Styles In Shopify | Easy CSS 👉🏽 • How To Create Custom Button Styles In Shop...
📑 Get access to my Shopify Pre-Launch Checklist list at https://betsylugo.com/shopify-checklist/
🔔 Thanks for watching and be sure to subscribe for more awesomeness!
⚞⚞⚞⚞⚞☕️ ABOUT ☕️⚟⚟⚟⚟⚟
Learn how to design & customize your Shopify website. Subscribe to be notified when a new video is released. I pledge to keep the tutorials simple, short, and helpful!
I’m a self-taught web designer, super-nerd, and a Shopify partner. Owner of Betsy Lugo Creative ☕ I drink an insane amounts of coffee, so if you want to say thanks for a helpful video, buy me a coffee! https://www.buymeacoffee.com/bl.creative .
👉🏽LET'S CONNECT
Say hi on Insta / betsy_oficial
Follow me on Pinterest / bl_creative
Work with me https://www.betsylugo.com
Join Commerce Connection - A monthly newsletter sharing Shopify news and updates, ecommerce trends, freebies and more! https://betsylugo.com/monthly-newslet...
👉🏽 My YouTube Gear
Mic Stand https://amzn.to/45jY8IO
Rode Posmic https://amzn.to/4cdMVf1
Rode Lavalier Mic https://amzn.to/45pvJkG
Camera Desk Mount https://amzn.to/3Rp6ER7
Camera Lens Filter https://amzn.to/4aHQwkk
Elgato Green Screen https://amzn.to/4aYjE6T
👉🏽 TOOLS & SYSTEMS I LOVE
Protect your business https://bit.ly/BLC-Policies
Custom Shopify sections https://bit.ly/BLC-Sections
My preferred themes https://bit.ly/BLC-Themes
Want more? Check out my resources page https://betsylugo.com/resources/
The term "Shopify" is a trademark of Shopify Inc. and the term "Canva" is a trademark of Canva Inc. This video was not approved or endorsed by them. I just really love their platforms ♥
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
#ButtonHover #ButtonCustomization #ShopifyCustomization