Create the PERFECT Button (TailwindCSS / Framer Motion)

Поделиться
HTML-код
  • Опубликовано: 2 дек 2024

Комментарии • 86

  • @shanehoban
    @shanehoban 7 месяцев назад +58

    Absolutely disgustingly good content on your channel

    • @iamrithmic
      @iamrithmic  7 месяцев назад +2

      Haha thank you :)

    • @Samkhan7t3
      @Samkhan7t3 7 месяцев назад +3

      What an up down of emotion 😂

  • @RobertinhoCraft
    @RobertinhoCraft 7 месяцев назад +43

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

  • @dhruvalraval8078
    @dhruvalraval8078 7 месяцев назад +7

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад +1

      Thank you! Yes will be doing more in the future

  • @auraSinhue
    @auraSinhue 7 месяцев назад +4

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      Glad you enjoy it!

  • @bilalillahi6347
    @bilalillahi6347 7 месяцев назад +3

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад +1

      This means a lot! Thank you

  • @alterWarOfficial
    @alterWarOfficial 7 месяцев назад +2

    I was impressed at the xor / exclude mask thingy

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      Thank you. Was hoping that it translated well

  • @sinhasuvam
    @sinhasuvam 7 месяцев назад +2

    1st time watcher. Thanks for the awesome explanation.

    • @iamrithmic
      @iamrithmic  6 месяцев назад +1

      Glad you liked it!

  • @jannisstefanis9671
    @jannisstefanis9671 7 месяцев назад +6

    yea man thats exactly the content i love from you

    • @iamrithmic
      @iamrithmic  7 месяцев назад +1

      Words mean a lot. More to come :)

  • @shadowlegend9751
    @shadowlegend9751 7 месяцев назад +3

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

  • @王呢-z1f
    @王呢-z1f 7 месяцев назад +3

    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.

  • @loganconnors
    @loganconnors 7 месяцев назад +2

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

  • @HydroRx
    @HydroRx 7 месяцев назад +3

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      You're very welcome!

  • @salehinafnan
    @salehinafnan 7 месяцев назад +3

    Top tier content. PLEASE CARRY ON👌🏻💯💯

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      Thank you! More to come

  • @kcin4206
    @kcin4206 7 месяцев назад +13

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

  • @ecodersofficial
    @ecodersofficial 7 месяцев назад +2

    Amazing, you gained a new subscriber!

    • @iamrithmic
      @iamrithmic  7 месяцев назад +1

      Awesome, thank you!

    • @ecodersofficial
      @ecodersofficial 7 месяцев назад

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

  • @r-i-ch
    @r-i-ch 7 месяцев назад +4

    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.

  • @felixranesberger3846
    @felixranesberger3846 7 месяцев назад +2

    Great video!

  • @Helixr
    @Helixr 7 месяцев назад +13

    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  7 месяцев назад +2

      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.

  • @user-pw5do6tu7i
    @user-pw5do6tu7i 7 месяцев назад +2

    today I understand the hype behind tailwind lol

    • @coomservative
      @coomservative 7 месяцев назад

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

  • @amogelangmoatswi1918
    @amogelangmoatswi1918 7 месяцев назад +3

    Work of art content, thank you

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      This means a lot. Thank you!

  • @vedant588
    @vedant588 7 месяцев назад +1

    high value content right there.

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      Your comment means a lot :)

    • @vedant588
      @vedant588 7 месяцев назад +1

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

  • @jsaugat_
    @jsaugat_ 7 месяцев назад +1

    Subscribed !! Thank you so much

  • @IkraamDev
    @IkraamDev 7 месяцев назад +6

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад

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

  • @nathnaelwondisha6649
    @nathnaelwondisha6649 7 месяцев назад +2

    you earned a sub

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      That means a lot :)

  • @_jacuzii_
    @_jacuzii_ 7 месяцев назад +2

    great video

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      Glad you enjoyed it

  • @chudchadanstud
    @chudchadanstud 7 месяцев назад

    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.

  • @amg4160
    @amg4160 7 месяцев назад +2

    this shit is amazing ty for this

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      You are more than welcome

  • @jkloopd1029
    @jkloopd1029 7 месяцев назад +2

    cool!

  • @ShahryarAsif
    @ShahryarAsif 4 месяца назад

    Can we do animated shinny border? which only moves around the button or the card ?

  • @hamid-aliweb
    @hamid-aliweb 7 месяцев назад +1

    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  7 месяцев назад +1

      Yeah would like to do some more SVG related content

  • @jirkaB_
    @jirkaB_ 5 месяцев назад

    Hello, amazing tutorial, but i have an issue: when i made change to any of props in motion component it wont rerender in browser any solutions?

  • @adenanshaleh6547
    @adenanshaleh6547 7 месяцев назад +2

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

    • @raymondmichael4987
      @raymondmichael4987 6 месяцев назад

      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 6 месяцев назад

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

    • @raymondmichael4987
      @raymondmichael4987 6 месяцев назад +2

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

    • @karimartikainen1
      @karimartikainen1 4 месяца назад +1

      @@raymondmichael4987 Thank you!

  • @wlockuz4467
    @wlockuz4467 7 месяцев назад +2

    What do you use to edit the code?

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      Snappify + Premiere Pro + A lot of sweat

    • @wlockuz4467
      @wlockuz4467 7 месяцев назад +2

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад

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

  • @rawallon
    @rawallon 7 месяцев назад

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

  • @b4rt1j1
    @b4rt1j1 7 месяцев назад +1

    Is it possible to implement this without react?

  • @samy.filmmaker
    @samy.filmmaker Месяц назад

    i saw this button on crayo ai, it was you?

  • @treyrader
    @treyrader 7 месяцев назад

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

  • @IsebellaStone
    @IsebellaStone 7 месяцев назад

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

    • @iamrithmic
      @iamrithmic  7 месяцев назад

      I haven't tried it

  • @Torbikini
    @Torbikini 7 месяцев назад +1

    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  7 месяцев назад

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

  • @ChuZaco
    @ChuZaco 7 месяцев назад +2

    DON’T SEE NO T

    • @iamrithmic
      @iamrithmic  7 месяцев назад +2

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

    • @ChuZaco
      @ChuZaco 7 месяцев назад

      😂😂😂😂

  • @coomservative
    @coomservative 7 месяцев назад

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

  • @CristianKirk
    @CristianKirk 7 месяцев назад

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