Loading video...

Video Failed to Load

Go Home

🚀 Launch day! Meet⚡️Micro-Interactions ready to use micro-interactions library made for Webflow. 🟡20+ Button Hover Interactions included. 🟡Copy & paste into your projects. 🟡Totally free to use, no strings attached. #webflow #NoCode #uiuxdesign

29,616 views • 2 years ago •via X (Twitter)

74 Comments

brryant's profile picture
brryant2 years ago

@webflow this is so cool! Maybe turn this into a Designer Extension app? (could still utilize copy/paste) but would make it easier for folks to find and use.

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks @bryantchou means a lot. 🙌 Yes, that’s the next step to tap into extension app. Just need to figure out how to make one. 😍

Tony Seets's profile picture
Tony Seets2 years ago

@webflow I'll just be here hovering over buttons all day. 🤤 Thanks Hafiz. Excellent work dude!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Haha thanks Tony. 😍 We’ll keep for hover now but planning add some more fun stuff too.

Aonnoy Sengupta | Product Designer & WWX Developer's profile picture
Aonnoy Sengupta | Product Designer & WWX Developer2 years ago

@peces @webflow Hafiz thank you for blessing the community with this library! Amazing work 🔥🔥🚀🚀

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@peces @webflow Ah, glad to see your appreciation. Thanks buddy.

Jordan Gilroy's profile picture
Jordan Gilroy2 years ago

@webflow Bravo sir

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you.😊

Vimalan's profile picture
Vimalan2 years ago

@webflow Killer work man! Can't wait for it to grow!💪🏽

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks buddy. I hope it helps people save some time. 🤞

Anish | Web Developer's profile picture
Anish | Web Developer2 years ago

@webflow This is some work. Perfectly executed. Thanks.

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@the_webflow_guy @webflow Thanks Anish.

Rajan Dave | The Vector Box's profile picture
Rajan Dave | The Vector Box2 years ago

@webflow Great Great work brother! all the interactions are really good ⚡️

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks man. 🙌

Web Bae's profile picture
Web Bae2 years ago

@webflow I’ll just be hovering all day today then.

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow All day, everyday. 🙌

Espinosa's profile picture
Espinosa2 years ago

@webflow Good job man, thanks for the effort!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you buddy. Road to become a better designer. 😊

Espinosa's profile picture
Espinosa2 years ago

@webflow You'll become better, you are already

Matt Vidal's profile picture
Matt Vidal2 years ago

@webflow Legend! What a wonderful job! 🔥

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@eumateusvidal @webflow Thanks man. Appreciate it.

Palatium • Portfolio designer's profile picture
Palatium • Portfolio designer1 year ago

@webflow Looks amazing!

Trist's profile picture
Trist2 years ago

@webflow 😍 Have been working on my own collection of these too! 😅 Awesome work Hafiz.

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Ah, coincidence 😉 Would love to see your collection bro. I’m sure they will be awesome.

Victor 🧢's profile picture
Victor 🧢2 years ago

@webflow Love your micro interaction

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you Victor. Appreciate the support.

Alaba-Odu | Lowcode dev's profile picture
Alaba-Odu | Lowcode dev2 years ago

@webflow This are great Hafiz. Baroqa Allah fih brother

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow JAZAKALLAH Brother.🙌

Alaba-Odu | Lowcode dev's profile picture
Alaba-Odu | Lowcode dev2 years ago

@webflow Aameen, wa iyakum ❤️

Maggy | Webflow Premium Certified Partner's profile picture
Maggy | Webflow Premium Certified Partner2 years ago

@webflow So cool, thanks Hafiz!!!

Alex Teillet's profile picture
Alex Teillet2 years ago

@webflow Insane work !

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks Alex. Glad you find it helpful 🙌

Zest for Webflow - Custom CSS extension's profile picture
Zest for Webflow - Custom CSS extension2 years ago

@robhope @webflow This is beautiful work! 🙌

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@robhope @webflow Thank you. Glad you liked it. 🙌

Darragh Lynch 🇮🇪 | Freelance Webflow Developer's profile picture
Darragh Lynch 🇮🇪 | Freelance Webflow Developer2 years ago

@webflow Bookmarked straight away and already implemented into a one-page client project. Amazing resource Hafiz 👏

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Ah thank you Darragh. Appreciate the support and I hope it has saves you some time. 🤞

Darragh Lynch 🇮🇪 | Freelance Webflow Developer's profile picture
Darragh Lynch 🇮🇪 | Freelance Webflow Developer2 years ago

@webflow Already saved me a bit of time as I was about to finish off this page with some micro interactions on the buttons of this site!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Love that Darragh. This is coming out so good. Thanks for giving it a try 🙌

Martynas_'s profile picture
Martynas_2 years ago

@webflow Amazing work!! Will definetly use some in next project

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks, Woudl love to hear your feedback once you use it. 😊

Nicholas Ryan Howard's profile picture
Nicholas Ryan Howard2 years ago

@webflow Amazing!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks Nicholas. 😊

Sako's profile picture
Sako2 years ago

@webflow Amazing work Hafiz, thanks for sharing.

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you buddy. 🙌

Muhammad Junaid's profile picture
Muhammad Junaid2 years ago

@webflow These looks really nice - Do work on text animation as well :)

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@juni_fied @webflow Sure. One step at a time. 😊

Ludovic Losco's profile picture
Ludovic Losco2 years ago

@webflow Awesome! Congrats 🥳

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks man, would love your feedback.

Ludovic Losco's profile picture
Ludovic Losco2 years ago

@webflow What to say other than: I love it? Keep it up man 💪

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Love it bro. Thanks

Sara Brunettini's profile picture
Sara Brunettini2 years ago

@webflow Thank you very much!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks Sara. Glad this got your attention 😍

Parth Gaurav | Official Webflow Expert / Partner's profile picture
Parth Gaurav | Official Webflow Expert / Partner2 years ago

@webflow This looks great Hafiz! Congrats on the launch 🚀

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you Parth. Glad you liked it.🙌

David Minelli's profile picture
David Minelli2 years ago

@webflow Good stuff, Thanks Hafiz!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks David. I hope it can save some of you time. 🤞

Assa's profile picture
Assa2 years ago

@webflow Thanks for sharing that's so dope !

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks @assa_uxdesign for your feedback.

Pir Ahmed - Product Designer's profile picture
Pir Ahmed - Product Designer2 years ago

@webflow Incredible work, bro! Can't wait to see your project grow - all the very best! 🙌💯

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks buddy. Always appreciate your support.

Ali | Webflow Developer's profile picture
Ali | Webflow Developer2 years ago

@webflow Yayyy congrats Hafiz! Love them. Those gradient strokes are sick

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Ah thank you Ali. Glad you've catch this. 😊

Charlie Osborne's profile picture
Charlie Osborne2 years ago

@webflow these are soooo nice!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you Charlie. Means a lot 🙌

Dale Janzen's profile picture
Dale Janzen2 years ago

@webflow Your collection looks really good... thanks for sharing!

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thanks Dale, really menaas alot. I laready have the next batch almost ready to add. Would love your feedback on this 🙌

Muaaz's profile picture
Muaaz2 years ago

@webflow cooking ayy

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow 🧑‍🍳

Ben Hammond | Webflow Certified Partner 👨‍🍳's profile picture
Ben Hammond | Webflow Certified Partner 👨‍🍳2 years ago

@webflow Amazing work dude! Absolutely love it.

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@webflow Thank you Ben. Glad you landed. Would love to hear your feedback. 🙌

Michael Henein's profile picture
Michael Henein2 years ago

@elsaaamri @webflow Oh wow, this is great. Bookmarked!

Shaheer Ud Din | Websites's profile picture
Shaheer Ud Din | Websites2 years ago

@webflow Oh my God, these are very very beautiful. I just literally loved them. Now, I don't have to design buttons from scratch, I can use these to speed up my work. Thanks, Hafiz.🫶

Hafiz - Webflow Designer & Developer's profile picture
Hafiz - Webflow Designer & Developer2 years ago

@shaheeruidesign @webflow You are moset welcome Shaheer. Aim is to save some dev time, I hope it will do the job. 🙌

opensourceCM's profile picture
opensourceCM1 year ago

What’s the cost of mistakes in your contracts? If you work with contracts day-to-day, it’s time to automate. Track every detail, streamline workflows ... ✨ Make managing contracts as easy as a few clicks. Visit our new website & book your demo today!

Related Videos

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,497 views • 1 year ago

Claude Skills are a cheat code for DTC creative teams 🤯 One setup, reusable forever. Claude automatically follows your exact creative process — briefs, hooks, ad copy, research — without you explaining anything twice. Perfect for e-comm brands and agencies who are using Claude for creative work but wasting time re-explaining context every single conversation. Here's the problem: You open Claude: you paste in your brand guidelines, explain your brief format, write the copy, you close the chat. Next day, you do it all over again. Every conversation starts from zero. You're burning 20 minutes on setup before you even get to the actual work. Claude Skills fix this: → Write your creative process once as a Skill (a simple markdown file) → Claude reads it automatically whenever the task comes up → Skills compose — research triggers the research Skill, briefs trigger the brief Skill, copy triggers the copy Skill → All in one conversation, all building on each other → Share across your team so everyone gets the same quality output No re-explaining your brand voice. No pasting the same context every chat. No siloed projects that don't talk to each other. What's in the playbook: → The full architecture (how Skills trigger, chain, and compose) → 5 ready-to-use Skill templates built for DTC and agency creative teams → Step-by-step setup from zero to working Skills → How to write instructions that produce consistent output every time → The composability framework for running multi-step creative workflows in one conversation I put together the complete Claude Skills Playbook for DTC brands and creative agencies. Want it for free? >Like this post >Comment "SKILLS" And I'll send it over (must be following so I can DM)

Mike Futia

31,963 views • 6 months ago

-> someone cloned claude -> design interface and -> made it completely free -> it's work on YouTube -> and also suitable for kids -> it’s called open design -> and it’s live on github -> same clean split-screen ui -> you get in claude artifacts -> prompt on the left, live -> design/code preview on -> the right, type what you -> want to build and it -> generates the ui in real -> time, but here’s the twist -> you pick the ai model -> not locked into one -> company, want to use -> gemini, mistral, llama, -> deepseek any model -> with an api work -> if you’re running local -> models with ollama -> that works too -> no subscription walls -> the big difference -> vs claude artifacts -> works with any free -> ai model you’re not -> paying $20/mo just to -> design, use free tiers -> local models, or whatever -> you already have access to -> fully local, your prompts -> and code never leave -> your machine unless -> you want them to -> no data training -> no cloud storage -> privacy by default -> no usage limits -> claude cuts you off -> after a few designs -> here you can generate, -> iterate, break things -> and rebuild all day -> the only limit is your -> don’t like how a button -> works, change it -> want to add your own -> components, go ahead -> you own the tool -> so if you’ve been gatekept -> by paywalls or worried -> about sensitive prompts -> going to some company’s -> servers, this fixes that. -> same workflow, more -> control, zero monthly fee

BeingInvested

12,134 views • 3 months ago

growing your Twitch stream means posting short-form video on TikTok/Shorts/Reels. love it or hate it, that's the reality now. "at least one video a day" you hear everywhere. you probably already know this. you probably feel guilty for not posting enough. THAT ENDS NOW Shortify was just released into Early Access, and it changes the dynamic entirely. you already create mountains of content every time you go live. you just need help getting it out. the Highlight Hunter from FrostyTools already does incredible work finding those great moments for you at the press of a button. now, you can Shortify any of those hunted clips into a postable vertical video for short-form content, complete with dead air removal, advanced captions, attention-keeping cuts, and dynamic focus. these are the "daily vitamins" of content. you have to keep up with them every day, but they bring huge benefits when you do. you probably just don't have the time to keep up with it, especially if you're still learning how. it doesn't have to be like that anymore! if you're already editing, this can free up your time and focus to work on more ambitious projects, especially longer-form content. using it is SUPER easy: - sign into your FrostyTools dashboard via your Twitch account - run the Highlight Hunter on one of your VODs (or go to a hunted VOD if you already use it) - hit the 'Shortify' button on the moments you like best for your socials - in a minute or two, have your Shortified video ready to download and post! remember: you already make tons of content, you just need tools to get it out!

Ken aka Frosty

90,540 views • 7 months ago

Trillions have been spent on anti-natal propaganda and ensuring women have fewer interactions with babies. Specifically in White countries. Playgrounds gutted post-COVID, overrun by addicts in US cities or boat migrants in Britain. The few parents we have feel like pariahs for existing, with nowhere to go. Heck, even McDonald’s went from bright, chaotic kid heaven to grey corporate plastic hell. Uncomfortable seats, no fun, quick turnover, all inside your "happy meal". Family pub meals or restaurant nights which were once a weekly tradition are now rare due to sheer cost and time poverty. Children are no longer seen as a natural part of your life cycle and a societal duty. They're not even seen as a fashionable accessory - not that this was healthy either. They've been relegated to impositions that inconvenience lives of others, with parents treated as pariahs should their child be anything but silent and obedient. Don't get me started on the push of women into education since the 70s and how 2/3rds of students are now women. All graduating into pointless make-believe office work that brings them no satisfaction like a family would. No wonder female anti-depressant usage is at a record high. This anti-family programming runs deep in every part of our culture, media and society. The good news is that we CAN undo it. We can give social reward to native women who have kids. They crave attention and recognition. Use that. Make society child-friendly again too. Tax breaks for businesses that meet these criteria. Use incentive structures. We need to signal that we're a society that invests in its next generation. We can flip the script faster than it took to build the current one. It's all so simple - it's hard wired into us. It's as simple as getting women to interact with children:

Russian Garbage Human

36,038 views • 3 months ago