Top 10 CodePens of the Week #3

Chris Sevilleja

Here’s our list of top 10 Codepens of the week. We’re showcasing the coolest and best things creative people have created. If you don’t already have a Codepen account, signup for for free account or even a paid PRO account and tweet us your front-end invention.

The Creepy Following Eye

by Jesse Couch

With no JavaScript!

See the Pen The Eye Follows You... by Jesse Couch (@designcouch) on CodePen.

Button Hover Animation Effects

by Fabrizio Bianchi

Very clean and smooth animations.

See the Pen Circular Buttons Animation Concept by Fabrizio Bianchi (@fbrz) on CodePen.

Full Page Hamburger Menu

by Gerhard Bliedung

That circle animation coming off the menu button is just awesome.

See the Pen Fullscreen Hamburger menu by Gerhard Bliedung (@bldng) on CodePen.

Loading Block Animation

by Filipe

A cool and unique loading animation. Reminds me of old school snake. Click RERUN if the animation isn't showing.

See the Pen hzanC by Filipe (@Gilipe) on CodePen.

Social Hover Buttons

by Dan Malarkey

We've seen these types of buttons before, but these make a good use of the cubic-bezier transition-timing CSS attribute.

See the Pen Social Icons On Hover by Dan Malarkey (@danmalarkey) on CodePen.

Radio and Checkbox Buttons

by White Wolf Wizard

Clean animations on these buttons make for a great experience.

See the Pen Radio & Checkbox by White Wolf Wizard (@WhiteWolfWizard) on CodePen.

Neat Page Loading Animation

by Riccardo Zanutta

Really like the loading animation and how the page appears to come from behind curtains. Click RERUN for the page load animation to show again.

See the Pen CSS3 spin preloader + preload Page by Riccardo Zanutta (@rickzanutta) on CodePen.

Facebook Paper Inspired Menu

by Intuitive Company

See the Pen Facebook Paper Inspired Menu by Intuitive Company (@intuitive) on CodePen.

Form Placeholder Labels

by Assaf Gelber

Unique sliding inputs that are very functional.

See the Pen Form Placeholder Labels by Assaf Gelber (@agelber) on CodePen.

Men In Black Gun

by Alex Safayan

Because toy guns.

See the Pen CSS ONLY #6 - Men In Black Gun by Alex Safayan (@alexsafayan) on CodePen.

Chris Sevilleja

162 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.