369 pure-css UI Design Examples

AMP Stories 2019

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

Card UI Inspired Checkbox and Radio Button with Background Fill on Click

Need some material design inspired checkbox and radio button in card UI style for your next project? With this pure CSS code snippet by Buddy Reno you can do...

card ui check box material design pure css radio button

Zoom In Circle Effect for Radio Button

Need some fancy micro-interaction for your radio buttons on your next project? Have a look at this CSS only sweet zoom in circle effect when you select the radio...

animation input field microinteractions pure css radio button

Smooth sliding Card UI radio button microinteraction

This is a smooth micro-interaction for radio buttons where the section slides across between the different options. It has a card UI look and feel to it and was...

card ui input field microinteractions pure css radio button

Switching Radio Button Interaction Animation

Have a look at this really cool switching micro-interaction animation for radio buttons designed by Dronca Raul. The active and non-active radio buttons swap when you click on them.

animation click animation microinteractions pure css radio button

Roman Numeral Themed Pagination that shows text alternative on click

Here is one fancy pagination snippet created using radio button by Michael Sveistrup. The different pages are shown as Roman numerals I II III IV V etc and on...