Create the PERFECT Button (TailwindCSS / Framer Motion)
HTML-код
- Опубликовано: 13 июн 2024
- Create the Perfect Button design and developed by Verse / verse_
Follow me on Twitter / X: / rithmio
👨💻 Looking for a web developer job, visit: www.webdevjobs.io/
👽 Discord - / discord
👾 Complete Code - github.com/sixfwa/shiny-butto...
🛠️ Starter Code - github.com/sixfwa/shiny-butto...
#reactjs #tailwindcss #css
summarizing why i don't like front-end. Great vid
Absolutely disgustingly good content on your channel
Haha thank you :)
What an up down of emotion 😂
Man your framer motion tutorials are so good, better than their docs lmao. Please create extensive tutorials around Framer motion
Thank you! Yes will be doing more in the future
As soon as i reached 2 minutes, i subscribed you. You have talent of Conveying So Beautifully.
This means a lot! Thank you
This is the first video I watched from your channel, it is amazing! ❤
Glad you enjoy it!
Even though I knew these source code, I still don't understand how it work.But the explanation provided in this video is exactly what I need.Thank, homie.
Glad it helped!
AMAZING!!
Thank you so much for explaining each and every detail provided in such an easy way to understand
You're very welcome!
I was impressed at the xor / exclude mask thingy
Thank you. Was hoping that it translated well
yea man thats exactly the content i love from you
Words mean a lot. More to come :)
1st time watcher. Thanks for the awesome explanation.
Glad you liked it!
I just subscribed to you and turned on my notifications because of this! we need more of these.
Thank you! More to come
One more here!
How to do modern frontend dev without going mad. Great video.
Thank you!
Great video!
Top tier content. PLEASE CARRY ON👌🏻💯💯
Thank you! More to come
today I understand the hype behind tailwind lol
this is an example of how it becomes a big mess, you could replace all this with 2 css selectors
That was a good dose of imposter syndrome lol, great work!
Thank you! Keep in mind editing can make the code look like it's "just that simple"
im a backend engineer and.. that felt so good.. nice content!!
Thank you!
Content-wise, this is excellent.
. Technology-wise: Not trying to be a hater, but I think the same interaction could maybe be done with pure css, and an svg mask.
Subscribed !! Thank you so much
Means a lot :)
Amazing, you gained a new subscriber!
Awesome, thank you!
@@iamrithmic Can you make such similiar tutorials for interactive cards?
I also learned the framer motion's whileHover and whileTap properties from you, so I implemented this also to my projects cards and its scaling animation looks great, but I think scaling of everything is boring. Maybe more such ideas?
This is amazing.I am a frontend developer but when I see stuff like that, the imposter syndrome kicks in.
Congratulations on re-creating this animation and I would love to see the card flip animation as well using framer motion.
Much appreciated.
Videos can always make code look like a piece of cake, but it's always a lot of head banging and in this case support from Verse.
you earned a sub
That means a lot :)
high value content right there.
Your comment means a lot :)
@@iamrithmic please teach such intermediate and advance css stuff on youtube.
Work of art content, thank you
This means a lot. Thank you!
great video
Glad you enjoyed it
cool!
this shit is amazing ty for this
You are more than welcome
Amazing 🎉. Please make tutorial on "glowing svg path moving lines" , I see this effect on many sites but don't know how to make it
Yeah would like to do some more SVG related content
Bro why yours ; keep changing position when transitioning to different code?
Him: I'm gonna make a button!
Some poor guy's CPU/Mobile: Oh god! Please don't.
Some poor guy with slow internet: Oh god! Please don't.
can someone explain how he set up the --x variable?
I'm wondering too, because TS is yelling at me now; bad thing, I don't even know where I can satisfy it 😥.
I can't even compile my application
Oooh, managed to solve it. Now the application builds successful 😊
define types file .d.ts at the root of your directory and put the following lines in it:
import 'react';
declare module 'react' {
interface CSSProperties {
'--x'?: string;
}
}
Is it possible to implement this without react?
Yes
What do you use to edit the code?
Snappify + Premiere Pro + A lot of sweat
@@iamrithmic Thanks man! Those code transitions look smooth af, wish you a lot of success!
Your words mean a lot. Yeah the software works out really well.
Can you make this design in framer? Without any code?
I haven't tried it
I haven’t heard of that animation tool, I’m assuming this can’t be accomplished with CSS animations then?
Thank you for the great video btw!
Framer Motion simplifies it, provides more control over the animation style.
Really appreciate the comment :)
Dang you should level up your tailwindcss skills! tailwind is like the greatest thing to ever happen for implementing frontend shinanigans
DON’T SEE NO T
Ain't no way bro 😂 Comment caught me off guard
😂😂😂😂
oh god, react/tailwind has now fully replaced jQuery, including using it for things that don’t need it.
This can be done with just CSS. It's weird to see it being almost forced to be with these bloated libraries.
by all means