How to build an Animated Button with React Aria and Framer Motion

Learn how to make better buttons for your websites on both mobile and desktop using the React Aria and Framer Motion libraries. 🚀 Demo: https://codesandbox.io/s/github/samse... 🧑‍💻 Code: https://github.com/samselikoff/2022-0... 🪄 Framer Motion course: https://samselikoff.com/framer-motion... 📚 Building a Button blog post, from React Aria: https://react-spectrum.adobe.com/blog... 📖 React Aria useButton docs: https://react-spectrum.adobe.com/reac... 📖 Framer Motion useAnimation docs: https://www.framer.com/docs/use-anima... 0:00 – Intro 2:28 – Fixing text selection 3:07 – Fixing scroll 3:42 – Problems with HTML buttons 6:30 – Using the Press event from React Aria's useButton 11:50 – Fixing the keyboard focus ring 14:29 – Animating on press with Framer Motion 18:40 – Fixing the isPressed feedback 23:31 – Making the tap highlight color transparent 24:36 – Final refactoring 26:47 – Final demo 27:55 – Outro