25 Amazing Web UI Components Built Using Pure CSS

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 Modal

CSS Progress

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

CSS Progress

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.

Gallery CSS

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.

Fullscreen Navigation Menu

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.

 Swanky Pure CSS Drop Down Menu V2.0

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.

Pure CSS Horizontal Accordion

CSS 3D transform Colorful Animated Carousel

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

CSS 3D transform Colorful Animated Carousel

One Page Navigation CSS Menu

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

One Page Navigation CSS Menu

Colorful CSS Buttons

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

Colorful CSS Buttons

Hand animation

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

hand animation

Pure CSS Icons

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

Pure CSS Icons

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.

CSS3 Toggle Radio & Checkbox

Timeline

Customizable CSS-only vertical timeline.

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.

littlebox

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.

Zocial CSS social buttons

Material Design CSS Only Tabs

Material Design CSS Only Tabs

Movie Card

A CSS3 Animated Movie Card From Dribble Shot.

movie card

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.

Hint

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.

Modern Material Forms

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.

evenFlow

Pure CSS Header Menu

Based on dribbble shot by Ennio Dybeli.

Pure CSS Header Menu

Responsive Table

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

Responsive Table

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.

prettify

Range Slider

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

range slider

Calendar

CSS-only Colorful Calendar Concept.

colorful calendar

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.