✦ Developer-First Web Tutorials & Free Templates

Architect your frontend with code templates, tutorials, & guides.

Open-source engineering perspectives on modern CSS layouts, JavaScript UI components, how-to tutorials, and curated code showcases.

HTML ● 1 min read

Colour Changing Toggle Switch

A fancy toggle switch that changes color on each click, designed by Alex Shevlyakov. If you are having trouble with the pen, try the archived copy on GitHub ...

Praveen Kumar ● March 26, 2020

Wave Text Animation In CSS

Praveen Kumar

HTML

Mar 23, 2020

3D Social Media Animated Buttons

Praveen Kumar

HTML

Mar 23, 2020

Newton’s Cradle Loading Animation

Praveen Kumar

HTML

Mar 23, 2020

More Guides & Articles

Browse All

HTML ● 1 min read

Glowing Social Icon Hover Animation

A bunch of social media icons designed with neon effect on hover designed by Rajeshdn. If you are having trouble with the...

Praveen Kumar

Mar 23, 2020

HTML ● 1 min read

Cartoon Inspired Smoke Range Slider

This is fancy range slider that emits a very cartoony smoke when you drag the slider to pick...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Laser Text Animation In CSS And Javascript

In this text animation by Martin Pitt, we have a really smooth text laser engraving effect using splitting.js...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Randomly Zoom In Parts Of A Text In A Paragraph

This is a nice little text effect snippet by Bennett Feely where you have a paragraph and parts...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Upload Button To Circular Progress Bar MicroInteraction

This sweet upload button animates into a circle on click and that circle acts a progress bar. This...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Checkbox Designed as Rocker Switch in Pure CSS

Love those rocker switches and the satisfaction of toggling it on or off ? Do you want to...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

CSS Only Content Slider

This is a content carousel in pure CSS , it has the left and right arrows to move...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Search Text Field With Icon To Search Result In Card UI

This a very chique search field animation by Aaron Iker. When you search for a term in the...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Angled Video Embed With Background Glow

This is a very cool video snippet that you can use on your website to give your embedded video player...

Praveen Kumar

Mar 15, 2020

HTML ● 1 min read

Text ring Loading Animation in HTML5 & CSS

Here is a really cool loading text animation that keeps spinning around a sphere by Jon Kantner, it...

Praveen Kumar

Mar 11, 2020

HTML ● 1 min read

Blog Image Card Hover Animation

his is a nice grid-style image gallery or blog archive layout that you can use in your webpages....

Praveen Kumar

Mar 11, 2020

JavaScript ● 1 min read

String Curtains With Motion Animation On Hover using Three.js

This is a very cool string curtain animation on hover that can be used to do a big...

Praveen Kumar

Mar 11, 2020

HTML ● 1 min read

Rainbow Shadow Grid Animation On Hover

Here is a nice rainbow animation as a shadow for a div content. When you hover over it...

Praveen Kumar

Mar 11, 2020

HTML ● 6 min read

Top 33 CSS Accordions

Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, animated, etc. HORIZONTAL ACCORDIONS Collection of free HTML and CSS...

Praveen Kumar

Jan 17, 2020