Create the PERFECT Button (TailwindCSS / Framer Motion)
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
Пікірлер: 82
summarizing why i don't like front-end. Great vid
Absolutely disgustingly good content on your channel
@iamrithmic
Ай бұрын
Haha thank you :)
@Samkhan7t3
Ай бұрын
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
@iamrithmic
Ай бұрын
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.
@iamrithmic
Ай бұрын
This means a lot! Thank you
This is the first video I watched from your channel, it is amazing! ❤
@iamrithmic
Ай бұрын
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.
@iamrithmic
Ай бұрын
Glad it helped!
AMAZING!! Thank you so much for explaining each and every detail provided in such an easy way to understand
@iamrithmic
Ай бұрын
You're very welcome!
I was impressed at the xor / exclude mask thingy
@iamrithmic
Ай бұрын
Thank you. Was hoping that it translated well
yea man thats exactly the content i love from you
@iamrithmic
Ай бұрын
Words mean a lot. More to come :)
1st time watcher. Thanks for the awesome explanation.
@iamrithmic
Ай бұрын
Glad you liked it!
I just subscribed to you and turned on my notifications because of this! we need more of these.
@iamrithmic
Ай бұрын
Thank you! More to come
@deliriumcode
Ай бұрын
One more here!
How to do modern frontend dev without going mad. Great video.
@iamrithmic
Ай бұрын
Thank you!
Great video!
Top tier content. PLEASE CARRY ON👌🏻💯💯
@iamrithmic
Ай бұрын
Thank you! More to come
today I understand the hype behind tailwind lol
@coomservative
Ай бұрын
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!
@iamrithmic
Ай бұрын
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!!
@iamrithmic
Ай бұрын
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
@iamrithmic
Ай бұрын
Means a lot :)
Amazing, you gained a new subscriber!
@iamrithmic
Ай бұрын
Awesome, thank you!
@ecodersofficial
Ай бұрын
@@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.
@iamrithmic
Ай бұрын
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
@iamrithmic
Ай бұрын
That means a lot :)
high value content right there.
@iamrithmic
Ай бұрын
Your comment means a lot :)
@vedant588
Ай бұрын
@@iamrithmic please teach such intermediate and advance css stuff on youtube.
Work of art content, thank you
@iamrithmic
Ай бұрын
This means a lot. Thank you!
great video
@iamrithmic
Ай бұрын
Glad you enjoyed it
cool!
this shit is amazing ty for this
@iamrithmic
Ай бұрын
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
@iamrithmic
Ай бұрын
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?
@raymondmichael4987
25 күн бұрын
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
@raymondmichael4987
25 күн бұрын
Oooh, managed to solve it. Now the application builds successful 😊
@raymondmichael4987
25 күн бұрын
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?
@iamrithmic
Ай бұрын
Yes
What do you use to edit the code?
@iamrithmic
Ай бұрын
Snappify + Premiere Pro + A lot of sweat
@wlockuz4467
Ай бұрын
@@iamrithmic Thanks man! Those code transitions look smooth af, wish you a lot of success!
@iamrithmic
Ай бұрын
Your words mean a lot. Yeah the software works out really well.
Can you make this design in framer? Without any code?
@iamrithmic
Ай бұрын
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!
@iamrithmic
Ай бұрын
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
@iamrithmic
Ай бұрын
Ain't no way bro 😂 Comment caught me off guard
@ChuZaco
Ай бұрын
😂😂😂😂
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.
@iamrithmic
Ай бұрын
by all means