It’s amazing what can be done with CSS these days. More and more developers are now playing with idea of pushing CSS to do things, normally done with the help of JavaScript. In this post we`ll showcase 25 Amazing Web UI Components Built Using Pure CSS that you may find useful in your own quest to push CSS beyond its ordinary use.

CSS Modal

Built out of pure CSS. JavaScript is only for sugar. This makes them perfectly accessible. The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.

CSS Progress

An animated progress bar using pure CSS with a special 3D look.

Gallery

Gallery css started as an experiment to build interactive, fluid componentry without the need for jQuery, or a jQuery carousel script. Use this library, or don’t — either way, hopefully you’ll learn from the techniques used within.

Fullscreen Navigation Menu

A fullscreen navigation with an animated hamburger toggle that displays an always-centered menu with a fullscreen overlay covering the whole webpage.

Drop Down Menu

Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.

Pure CSS Horizontal Accordion

Achieving this effect is pretty simple, the main targeting element to animate would be the width of the list container, the left margin of the icon container, and the background gradient of the icon container.

CSS 3D transform Colorful Animated Carousel

A pure CSS 3D perspective carousel that automatically rotate through a group of html content using CSS3 transforms.

One Page Navigation CSS Menu

This is a one page navigation with diferent sections and a pure CSS menu and transitions.

Colorful CSS Buttons

A collection of various types of CSS buttons in various colors.

Hand animation

I really liked that little hand animation so I decided to recreate it in good pure CSS only. No JS was harmed.

Pure CSS Icons

A set of simple round icon hover effects with CSS transitions and animations.

CSS3 Toggle Radio & Checkbox

A custom checkbox and radio buttons made with CSS3 that doesn’t require js. With the help of html generate tool it can easily customize such as colors, style etc. It is also compatible with FontAwesome.

Timeline

Customizable CSS-only vertical timeline.

littlebox

Littlebox is a set of icons made entirely with CSS.Each littlebox icon is made up of three or fewer elements, but can be called with as a single element with class .lb-icon followed by the .lb-* class associated with the requested icon.

Zocial CSS social buttons

Creative button set made by smcllns. These buttons are very easy to use and customize as they use @font-face for the icons so resizing is not a problem.

Material Design CSS Only Tabs

Movie Card

A CSS3 Animated Movie Card From Dribble Shot.

Hint

hint.css is written as a pure CSS resource using which you can create cool tooltips for your web app. It does not rely on JavaScript but rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

Modern Material Forms

Modern Material Forms are form elements built with only CSS3 and HTML5 without any images or javascript. These components can be used for creating forms faster using the included form elements such as inputs, radios, checkboxes, selects, toggle switches, file inputs among many others. In addition, various starter templates and themes are included to get you started.

evenFlow

is an easy Copy & Paste, responsive CSS gallery without all the bells and whistles getting in the way. It comes setup with the Magnific Popup Lightbox, but is effortlessly configured to work with any lightbox plugin. No framework, Bootstrap or other depencies are needed. Just pure, lean CSS.

Pure CSS Header Menu

Based on dribbble shot by Ennio Dybeli.

Responsive Table

Table collapses into a “list” on small screens. Headers are pulled from data attributes.

Flat Slider

A nightmare to keep the look consistent across browsers while using no JS. For Firefox and IE I have the ::-moz-range-progress and ::-ms-fill-lower respectively. For Chrome/ Opera used pseudo elements on the thumb and track. This is something that didn’t work until recently.

Range Slider

This can be useful for allowing users to select a specific price range when browsing products.

Calendar

CSS-only Colorful Calendar Concept.