386 pure-css UI Design Examples

AMP Stories 2020

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

CSS Only File Tree Structure with Folder, File Icons and Size Info

This is really simple but amazing file structure design in Pure CSS that you can apply to an unordered list by Sazzad Hossain, this was created as a part...

file structure list pure css

Gradient Button with a Gleam Effect

Here is a spectacular button that has a pretty gradient effect and on hover, you have a gleaming effect and the colour changes as well. This CSS only button...

button glint hover animation pure css

Colourful CSS Only Underline Effects

A bunch of pure CSS underline effects that can be used for links on your webpages, these were designed by Jordan Marshall. The effects include: a rainbow, slanted rainbow,...

link gradient pure css

CSS Only Numbered List with Multi Gradient Color

With this CSS only snippet by Erin E. Sullivan you can style your numbered list to have a multi gradient background for the numbers in the list. The list...

list card ui gradient pure css

Black Mirror Style Cracked Glitchy Text Effect

Want to recreate the glitchy cracked text effect as seen on Netflix’s Black Mirror? Then this CSS only text animation by gabecrockett is just what you need. The text...