What if you married code snippets and Dribbble? You’d get Codepen, the site that’s quickly rising in the ranks of front-end designers’ favorite code playgrounds. With HTML, CSS, and JavaScript editors right in the browser, members can design and display whatever UI demos they’re most proud of.

It also exhibits the code of developers’ clever ideas, so others can make a few tweaks or find workarounds for their own troubles. All this, plus a stylish design, is making Codepen a new go-to spot for both inspiration and entertainment.

Here, we collected 21 HTML projects with source code from Codepen. Have a browse of our selections, and hopefully you’ll find some inspiration of your own.

Menus and Sign-Up Forms

1. Filter Menu

Arjun Amgain (Concept: Anton Aheichanka)

html projects with source code

 

Amgain’s Filter Menu turns the hamburger menu into a hidden controls panel. Distinguished by its new but familiar icon, this feature gives users all the actions they need, tucked away until they need them.

This could be a huge space-saver for mobile sites with substantial interaction. Social media sites could use it for liking, commenting, or saving actions, while eCommerce sites could hide ‘Add to Cart’, ‘Review’, ‘Like’, or ‘Wishlist’ actions.

Click for the code.

2. CSS Gooey Menu

Lucas Bebber

html projects with source code


Version 3

html projects with source code


Version 4

Material design in its purest form: shadows, layers, flat icons, bright colors, and conservation of space for mobile. Bebber’s Gooey Menus offer something new and unique without sacrificing the best advantages of Google’s design style.

Click for the code.

 

3. Responsive Sidebar Revealed on Click and Key Press

Antonija Šimić

html projects with source code

 

The beautiful animation in Šimić’s sidebar adds a little extra to hamburger menu slideout without deviating from the standard. The lined hamburger icon converts to the same X icon to cancel the action, while the items in the menu are gradually faded in one by one.

Click for the code.

4. Interactive Sign-Up Form

Riccardo Pasianotto (Concept: Denis Abdullin)

html projects with source code

 

Designers are always thinking of clever ways to avoid sign up form abandonment, and sometimes it’s as easy as a fun microinteraction like Pasianotto and Abdullin’s Interactive Sign Up Form. The fields appear one at a time to not overwhelm the user and keep them focused, plus the layered background assures them it won’t take long. On top of that, it just looks and feels fun.

Click for the code.

5. Interactive Form

Emmanuel Pilande

html projects with source code

 

Just like the sign-up form above, Pilande’s form guides users through the sign-up process one small step at a time. The benefits of this are the extra fields for sign-ups that require a few extra steps. Notice the tracker on the side to show users how long the process will take.

Click for the code.

Microinteractions

6. Card Fold Down Effect with Dynamic Height

Kriszta Vadja

html projects with source code

 

For content that’s useful but not necessary, Vadja designed this Card Fold Down Effect. Like hidden controls, the extra information remains out of sight until activated with a click/tap. While the concept isn’t new, the “fold out” mechanism is.

Click for the code.

7. eCommerce Animations

Rune Sejer Hoffmann

html projects with source code

 

There’s a lot going on in Hoffman’s Ecommerce Animations. The picture expands on hover for a better view of the product (and to show interactivity). The ‘Add to Cart’ button does the same, and changes color when clicked to show activation, while the number appears next do the cart icon (and notice the cart icon now has “stuff” in it).  Lastly, the Quickview menu shows a “quick view” of some extra product details without having to click the actual page.

This format is attuned to browsing, and is especially useful for online stores with a lot of products.

Click for the code.

8. eCommerce Slider v1.0

Pedro Castro

html projects with source code

Useful for more than just eCommerce, the Ecommerce Slider is a sophisticated and modernized take on the classic image carousel. The original principles remain the same — displaying different pictures — but the style has been updated. The larger photographs, simple typography, overlapping text and images, and the numbered slider instead of dots all make this carousel seem current.

Click for the code.

9. Responsive Animated Gallery

Claudio Gomboli

html projects with source code

 

Another alternative for image carousels in Gomboli’s Responsive Animated Gallery. While the images themselves don’t do much to entice the user because they’re hidden, it’s that same mystery that makes this microinteraction alluring. With the hover animations, users enjoy simply interacting with the gallery, and are more likely to click to discover what each element contains.

Related posts:  Hacking The CTA Button For Maximum Conversions

Click for the code.

10. Fancy Meter

Rafael González

html projects with source code

 

It’s a shame there’s not more diversity with meters and ratings. It’s such a simple and easy-to-understand concept; designers could use virtually anything to signify a rating, and yet often limit themselves with stars.

González’s Fancy Meter has more depth, accuracy, and a fun reflection at the bottom, living up to its name.

Click for the code.

11. Button Ideas for eCommerce

Tommaso Poletti

html projects with source code

 

Not all microinteractions need to change the entire user experience. A lot of times, a fun new take on an animation is enough, like Poletti’s Button Idea for eCommerce.

Click for the code.

12. Simple Helpful Icon Mockup

Matthew Greenberg

html projects with source code


As we mentioned in a previous article
, immediate help options are becoming more and more popular. Greenberg’s Simple Helpful Icon gives the new trend an expandable input with beautiful and intuitive animations.

Click for the code.

13. Add to Cart Animation

Filip Danisko

html projects with source code

 

Add to Cart animations seem to be getting more advanced, and Danisko’s take is on the forefront, with the actual photograph of the product shrunk down, and the appearance of the pay call-to-action.

Click for the code.

14. Flappy Dialog

Alex Wright (Concept: Peter Main)

html projects with source code

 

Standard two-option windows don’t have to be so standard. This Flappy Dialogue doesn’t just make yes-or-no questions more fun; it also helps the user pay attention. This comes in handy if you notice your users clicking out of habit instead of actually reading the question.

Click for the code.

15. Daily UI #012 eCommerce Shop Item

Tobias

html projects with source code

 

This nice microinteraction highlights the color-change option of a product by simultaneously changing the color in the background. Even more, the changing photo seems to morph, making the simple graphic seem more impressive than it is.

Click for the code.

16. Basic eCommerce Layout 3 Tabs

DavieB

html projects with source code

Product pages need to fit a lot of content on a single page without distracting the user. A shortcut is this three-tabbed layout, which lets the user quickly switch between three different need-to-know descriptions.

Click for the code.

Layouts and Navigation

17. Cards — Protus

José Luis Antúnez

html projects with source code

 

The cards layout is effective for its ease with mobile responsive sites and it’s satisfyingly structured aesthetic. The layout is so efficient, in fact, that the Internet is now flooded with it.

Antúnez’s Protus Card layout keeps everything we love about cards but gives the visuals a smart twist to help them stand out. Notice the color changes on hover.

Click for the code.

18. eCommerce Product List/Grid

Ricard

html projects with source code

 

While not as distinctive as the Protus Cards above, this Ecommerce Product List/Grid brings descriptive hover windows to eCommerce sites. This helps descriptions appear only on hover in the style of Netflix, allowing for more product cards per page and preview details without clicking.

Click for the code.

19. eCommerce Product Grid Prototype

James Mejia

html projects with source code

 

In the spirit of giving users more control outside of the specific product page, Meija’s Product Grid Prototype lets users make all the important sales decisions in an unobtrusive modal window, eliminating the need for a product page altogether.

Click for the code.

20. Scroll to Top Then Fixed Navigation Effect with jQuery and CSS

Stan Kostadinov

html projects with source code

 

This minimal, out-of-the-way sticky bar satisfies all our criteria for a good navigation menu, plus it’s visually compelling. Sticky navigation is downright essential for long- and infinite-scrolling sites, so it’s nice to have an option that looks this good.

Click for the code.

21. Basic Shopping Cart Layout

DavieB

html projects with source code

 

This shopping cart layout was designed with easy usability in mind. All the necessary details are displayed clearly, with enough empty space to make everything easy to find. DavieB includes extras like a shipping calculator and coupon entry, and the important calls-to-action are emphasized with a bright orange.

Click for the code.

We hope you liked this selection of HTML projects with their source code. Feel free to suggest which one is your favorite or share other Codepens with us in the comments below.