15 Useful Modern Front-End Web Components

Here is list of useful modern front-end web components that can be integrated into your web applications. These components provide a quick and easy way for web developers to create custom user interface without having to start from scratch.

Collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

Hamburgers

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

Balloon

This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select’s text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.).

Select.css

WTF, forms? provides friendlier HTML form controls with a little CSS magic. It’s designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

WTF, forms?

User-friendly, fully customizable, responsive jQuery popup modal to take any HTML content, including images, videos, SVG icons,forms and display it in a clean organised and responsive popup. It is easy, flexible, powerful to create professional looking popup modal.

Replete Modal

Jalendar offers you 4 different calendar options. You can list your events, you can link to days, you can use Jalendar Selector for date selecting and you can use Jalendar Range for range selecting on calendar.

Jalendar

Modern Accordion Menu is a simple CSS3 and HTML5 accordion menu component that can be used on any website or application. The component is designed to work without Javascript and supports all HTML content.

Modern Accordion Menu

The jSon Slider is a multi purpose jQuery plugin. You can crate slider, carousel & timeline. It is a responsive and fast-loading slider with built-in search functionality and other powerful features.

jSon

This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.

okayNav

Finally, a “back to top” button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.

Elevator

Animated SVG for use as loading animations.

SVG Loading icons

A few examples of flashy hover effects.

Collection of Button Hover Effects

Icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS.

Icono

12 Spinners HTML5 and CSS3 no images, just css animations and 1 div tag in the HTML. NO JS

CSS Loading Spinners

Form element autosizing, the way it should be.

stretchy