354 pure-css UI Design Examples

Pure CSS Code Snippets

In this section, you will find pure CSS examples or HTML elements designed in only CSS to give it some sassy effects. Traditionally one might sue JS and other things to achieve similar effects but there are purely CSS only.

From accordion, slider to dropdown navigation menus you can find a lot of CSS only code snippets in here. With the code snippets from this section, you can recreate these effect on your website with no coding experience.

Part of:	buttons, Search, …
What it does:	create awesome designs and animations without Javascript

HTML, CSS Code Snippets for pure css

Glowing Social Icon Hover Animation

A bunch of social media icons designed with neon effect on hover designed by Rajeshdn.

hover animation neon pure css social icon

Newton’s Cradle Loading Animation

Here is a Newton’s Cradle loading animation designed by Steven Traversi.

loading animation pure css

Comic book style uneven grid in CSS

Want to style up your images to look like a comics book page? This CSS only snippet by Aysha Anggraini will help you achieve that uneven grid layout for...

comic book grid layout image gallery pure css

Vote Counter in Material Design

If you want to showcase a voting interface in your next project with a strong material design influence then this upvote counter by Gregor Adams is just want you...

material design pure css

Hover Background Colour for Characters

In this simple text animation by Charlie Marcotte you see a tilted background colour added to each character as you hover over them, it kinda feels like stacked dominos.