css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. Love these. The transitions into arrows look especially smooth.

  2. Super cool man! Try throwing a 3d transform on your elements to fix some jankiness in chrome:

    section *, section *:before, section *:after { transform: translate3d(0,0,0); }

  3. Thanks Hakim and Michael! Noah, I've added that snippet so I think it should run smoother. Thanks!

  4. Nice :) I have some navicon animations.. if you want to see -> http://codepen.io/pedrocampos/pen/gufrx This is work with hover just to see the animations. The idea is toggle the classes on real use. Keep the good ideas on ;)

  5. The rollover & animation give them a delightful bounce - I clicked the + & x a number of times, grinning all the while. Great job!

  6. Beautiful subtleties. But can I ask how or when someone might want their navigation icon to turn into symbols? UX application is unclear to me.

  7. @carriecraver These icons could function as toggles for displaying menu. I'm not quite sure what the application for the +, -, or the loader icon could be but I think the arrows and X could be useful at least.

  8. @bennettfeely I think the - would work as a nav icon perfectly as well. It'll be like a "collapse" icon, or "show less". Makes sense to me UX-wise. :)

  9. So Cool :) I Love it

  10. Wow! Great UI solution - always have problems with icons for mobile UI due to lack of space... well done!

  11. Great stuff.

  12. Pretty cool

  13. Line 39 on the scss file should be 2.5rem not 2.5em

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.