Codelab: Animated Button States
Build a real call-to-action button with hover, press, loading, and reduced-motion states.
Set up your button lab
In this codelab, you'll build a single button that teaches a lot of animation fundamentals: hover feedback, press feedback, a loading pulse, and a reduced-motion fallback. Buttons are the perfect place to practice because they're everywhere — checkout buttons, sign-up buttons, save buttons, upload buttons, and play buttons all rely on tiny motion cues.
Open a terminal on Linux with Ctrl + Alt + T, then run these commands one by one:
mkdir ~/animation-button-lab— create a new project folder in your home directorycd ~/animation-button-lab— move into that foldertouch index.html style.css— create the HTML and CSS filescode .— open the folder in VS Code
If you use a different text editor, that is completely fine — the important thing is saving plain text files.
If code . does not work, open your editor manually and choose File → Open Folder, then select ~/animation-button-lab.