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
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.
2. CSS Gooey Menu
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.
3. Responsive Sidebar Revealed on Click and Key Press
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.
4. Interactive Sign-Up Form
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.
5. Interactive Form
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.
6. Card Fold Down Effect with Dynamic Height
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.
7. eCommerce Animations
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.
8. eCommerce Slider v1.0
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.
9. Responsive Animated Gallery
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.
10. Fancy Meter
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.
11. Button Ideas for eCommerce
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.
12. Simple Helpful Icon Mockup
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.
13. Add to Cart Animation
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.
14. Flappy Dialog
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.
15. Daily UI #012 eCommerce Shop Item
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.
16. Basic eCommerce Layout 3 Tabs
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.
Layouts and Navigation
17. Cards — Protus
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.
18. eCommerce Product List/Grid
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.
19. eCommerce Product Grid Prototype
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.
20. Scroll to Top Then Fixed Navigation Effect with jQuery and CSS
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.
21. Basic Shopping Cart Layout
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.
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.