Amazing CodePens To Learn New Tricks From

A collection of cool CodePens featuring CSS buttons, a Dancing Leprechaun and Minesweeper in pure CSS!

I recently started working with CSS and front end development and looking for creative inspiration is something I find myself doing often. I came across this post by Sasha Tran about how she started drawing CSS images and after looking at her CodePen I started looking for more great CodePens. Some of these could be great ideas to use in an upcoming project or learning a new trick in the quest to do more with front end.

Ciprian Ionescu’s CodePen where one can click on various dates in the month of August 2015 and add notes for each day’s activity. After a user has added a note to a certain day, a dot appears underneath that day.

2. Gooey Menu

This CodePen by Lucas Bebber shows four ways of creating a sticky menu that pops out from a central icon and spreads, sometimes radially and otherwise linearly. My personal favorite is version 4, as shown above.

3. Rotating Text

A delightful display of continuously changing text in a loop, created by Rachel Smith. Play around with the timer if you like to see how quicker transitions can be fun.

4. The Mount

Paramount’s introduction before every movie — done the CSS way! This CodePen by Keisuke Takahashi could make you nostalgic.

5. Sorting Algorithms

For those like me who always struggled with sorting algorithms, this is a visual and fun take on Bubble sort, Selection sort, Shaker sort, Insertion sort, Shell sort, Quick sort, Merge sort, Heap sort and Bogo sort by Maksim Surguy. If you’re actually not sure about how each of these algorithms work, I suggest slowing it down and reducing the elements to understand them better.

6. Blob Defence

Fun game created by unlikenesses, it features protecting the blob from incoming meteors by firing lasers. It’s fun and simple. What more does one want from a game…

7. Animated Weather Icons

This implementation of weather icons is done completely in CSS. The motion is fluid and seamless. This CodePen belongs to Josh Bader.

8. Envelope

Created by Rafael Gonzalez, this animation of popping open the envelope is done purely in CSS.

9. Ping Pong

Hugo Groutel has created this ping pong demonstration on just CSS. It’s great inspiration for someone looking to understand motion and it’s implementation in pure CSS.

10. Tron Riders

Inspired by the Light cycle races as seen in the feature film franchise Tron, this is CodePen belongs to Digiti.

11. Minesweeper

Kudos to Bali Balo for creating the classic game on just CSS. It looks the same and feels the same as playing it on a Windows 98 system for me. In case you haven’t tried Minesweeper before — go discover it now!

12. Interactive Dots

This CodePen by Prayush S features dots that are attracted to wherever the mouse pointer is on the screen. If the mouse button is down, then the opposite effect comes into play where the dots move away from the mouse pointer. This is a trend that has been going around in quite a few sites, such as this well done example here.

13. Fun CSS Buttons

These are interesting CSS buttons created by Derek Morash. Maybe one of them could work for your project?

14. Video Box Scroll Reaction

This is one trick I sure wish I knew. Moving an ongoing video to the side as part of the scroll is a very neat trick. Julien Lejeune’s CodePen gives a good demonstration of this.

15. Loading Leprechaun

Anya Craig’s loading leprechaun or ‘Loadrechaun’ is a great example of the sort of animation that can be inserted while a user waits. Such small touches can make a world of difference to the interface. And it’s just pure CSS.

Hope these CodePens add to your front end dev journey like they did to mine!