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

  • @RobertinhoCraft
    @RobertinhoCraftАй бұрын

    summarizing why i don't like front-end. Great vid

  • @ShaneHoban
    @ShaneHobanАй бұрын

    Absolutely disgustingly good content on your channel

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Haha thank you :)

  • @Samkhan7t3

    @Samkhan7t3

    Ай бұрын

    What an up down of emotion 😂

  • @dhruvalraval8078
    @dhruvalraval8078Ай бұрын

    Man your framer motion tutorials are so good, better than their docs lmao. Please create extensive tutorials around Framer motion

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you! Yes will be doing more in the future

  • @bilalillahi6347
    @bilalillahi6347Ай бұрын

    As soon as i reached 2 minutes, i subscribed you. You have talent of Conveying So Beautifully.

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    This means a lot! Thank you

  • @auraSinhue
    @auraSinhueАй бұрын

    This is the first video I watched from your channel, it is amazing! ❤

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Glad you enjoy it!

  • @user-cx8bb3dz5y
    @user-cx8bb3dz5yАй бұрын

    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

    @iamrithmic

    Ай бұрын

    Glad it helped!

  • @HydroRx
    @HydroRxАй бұрын

    AMAZING!! Thank you so much for explaining each and every detail provided in such an easy way to understand

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    You're very welcome!

  • @alterWarOfficial
    @alterWarOfficialАй бұрын

    I was impressed at the xor / exclude mask thingy

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you. Was hoping that it translated well

  • @jannisstefanis9671
    @jannisstefanis9671Ай бұрын

    yea man thats exactly the content i love from you

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Words mean a lot. More to come :)

  • @sinhasuvam
    @sinhasuvamАй бұрын

    1st time watcher. Thanks for the awesome explanation.

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Glad you liked it!

  • @shadowlegend9751
    @shadowlegend9751Ай бұрын

    I just subscribed to you and turned on my notifications because of this! we need more of these.

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you! More to come

  • @deliriumcode

    @deliriumcode

    Ай бұрын

    One more here!

  • @kcin4206
    @kcin4206Ай бұрын

    How to do modern frontend dev without going mad. Great video.

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you!

  • @felixranesberger3846
    @felixranesberger3846Ай бұрын

    Great video!

  • @salehinafnan
    @salehinafnanАй бұрын

    Top tier content. PLEASE CARRY ON👌🏻💯💯

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you! More to come

  • @user-pw5do6tu7i
    @user-pw5do6tu7iАй бұрын

    today I understand the hype behind tailwind lol

  • @coomservative

    @coomservative

    Ай бұрын

    this is an example of how it becomes a big mess, you could replace all this with 2 css selectors

  • @IkraamDev
    @IkraamDevАй бұрын

    That was a good dose of imposter syndrome lol, great work!

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you! Keep in mind editing can make the code look like it's "just that simple"

  • @loganconnors
    @loganconnorsАй бұрын

    im a backend engineer and.. that felt so good.. nice content!!

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Thank you!

  • @r-i-ch
    @r-i-chАй бұрын

    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.

  • @jsaugat_
    @jsaugat_Ай бұрын

    Subscribed !! Thank you so much

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Means a lot :)

  • @ecodersofficial
    @ecodersofficialАй бұрын

    Amazing, you gained a new subscriber!

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Awesome, thank you!

  • @ecodersofficial

    @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?

  • @Helixr
    @HelixrАй бұрын

    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

    @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.

  • @nathnaelwondisha6649
    @nathnaelwondisha6649Ай бұрын

    you earned a sub

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    That means a lot :)

  • @vedant588
    @vedant588Ай бұрын

    high value content right there.

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Your comment means a lot :)

  • @vedant588

    @vedant588

    Ай бұрын

    @@iamrithmic please teach such intermediate and advance css stuff on youtube.

  • @amogelangmoatswi1918
    @amogelangmoatswi1918Ай бұрын

    Work of art content, thank you

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    This means a lot. Thank you!

  • @_jacuzii_
    @_jacuzii_Ай бұрын

    great video

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Glad you enjoyed it

  • @jkloopd1029
    @jkloopd1029Ай бұрын

    cool!

  • @amg4160
    @amg4160Ай бұрын

    this shit is amazing ty for this

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    You are more than welcome

  • @hamid-aliweb
    @hamid-aliwebАй бұрын

    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

    @iamrithmic

    Ай бұрын

    Yeah would like to do some more SVG related content

  • @rawallon
    @rawallonАй бұрын

    Bro why yours ; keep changing position when transitioning to different code?

  • @chudchadanstud
    @chudchadanstudАй бұрын

    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.

  • @adenanshaleh6547
    @adenanshaleh6547Ай бұрын

    can someone explain how he set up the --x variable?

  • @raymondmichael4987

    @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

    @raymondmichael4987

    25 күн бұрын

    Oooh, managed to solve it. Now the application builds successful 😊

  • @raymondmichael4987

    @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; } }

  • @b4rt1j1
    @b4rt1j1Ай бұрын

    Is it possible to implement this without react?

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Yes

  • @wlockuz4467
    @wlockuz4467Ай бұрын

    What do you use to edit the code?

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Snappify + Premiere Pro + A lot of sweat

  • @wlockuz4467

    @wlockuz4467

    Ай бұрын

    @@iamrithmic Thanks man! Those code transitions look smooth af, wish you a lot of success!

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Your words mean a lot. Yeah the software works out really well.

  • @IsebellaStone
    @IsebellaStoneАй бұрын

    Can you make this design in framer? Without any code?

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    I haven't tried it

  • @Torbikini
    @TorbikiniАй бұрын

    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

    @iamrithmic

    Ай бұрын

    Framer Motion simplifies it, provides more control over the animation style. Really appreciate the comment :)

  • @treyrader
    @treyraderАй бұрын

    Dang you should level up your tailwindcss skills! tailwind is like the greatest thing to ever happen for implementing frontend shinanigans

  • @ChuZaco
    @ChuZacoАй бұрын

    DON’T SEE NO T

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    Ain't no way bro 😂 Comment caught me off guard

  • @ChuZaco

    @ChuZaco

    Ай бұрын

    😂😂😂😂

  • @coomservative
    @coomservativeАй бұрын

    oh god, react/tailwind has now fully replaced jQuery, including using it for things that don’t need it.

  • @CristianKirk
    @CristianKirkАй бұрын

    This can be done with just CSS. It's weird to see it being almost forced to be with these bloated libraries.

  • @iamrithmic

    @iamrithmic

    Ай бұрын

    by all means