Top 10 CodePens of the Week #3

Chris Sevilleja
💬 comments

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!

Table of Contents

    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

    173 posts

    Founder of Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.