Improving hover/focus of a hamburger icon | microinteraction

From the creator

Use the coupon code LAUNCH at checkout to get 15% off a shirt through the end of January! https://teespring.com/stores/making-the-internet-awesome A look at improving our hamburger menu by improving the hover and focus states to make it more obvious that it can be interacted with, and as a bonus, it makes for a much more interesting animation when the menu opens and closes! The code: https://codepen.io/kevinpowell/pen/vYErvVq See me build this navigation: https://youtu.be/FqbOu5ZRFag Adding in @supports to have a backup for older browsers: https://youtu.be/wPI8CEoheSk --- Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter --- I have some courses! https://www.kevinpowell.co/courses/ --- My editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/kevinpowell --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell

Published 2020-01-22 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.