Social media floating action button (animated) // HTML & CSS in-depth

Опубликовано: 22 Март 2026
на канале: crayon code

4,214

117

Learn how to build an animated floating action button with social media icons in this in-depth episode about HTML & CSS and see how to
✔️ use CSS transformations
✔️ use CSS variables to build different themes
✔️ use JS to toggle a class

⌨️ CODE ⌨️

https://codepen.io/crayon-code/pen/Ba...

🖇️ USEFUL LINKS 🖇️

🔗 CSS transform property on MDN: https://developer.mozilla.org/en-US/d...
🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/d...
🔗 querySelector on MDN: https://developer.mozilla.org/de/docs...
🔗 addEventListener on MDN: https://developer.mozilla.org/en-US/d...
🔗 All about BEM (block - element - modifier): http://getbem.com/

🔔 SUBSCRIBE & LIKE 🔔

▶️ / @crayoncode

⏱️ TIMESTAMPS ⏱️

00:00 Markup
01:07 Basic CSS Setup
03:16 Action Item & Trigger Styling
05:56 Using Transformations for Arrangement
10:07 Using JS for toggling open & closed state
11:15 Transition delays
12:20 Trigger icon rotation
13:16 Hover effects

👋 FOLLOW

📸 INSTAGRAM: / crayon_code

🏷️ HASHTAGS 🏷️

#html #css #transformations #tutorial