CSS Archive

This is a collection of fresh button styles and effects for your inspiration by Codrops. CSS transitions and pseudo-elements have been used for most of the effects. The current “button trend” is quite exciting since there are a variety of design details …

A CSS grid framework built on SASS to provide an automatic responsive grid for web developers with flexibility for manual control when needed. This grid is a float and padding-based grid, meaning that it works by using floats to create rows and …

This is a tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG by Codrops. Can the text fill be animated? Can you fill text with animated shadows or gradients? Or …

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. …

A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements. While these effects are based on the place you click or …

What’s a transformicon? It’s an animated symbol/button using CSS and presented in a neatly packaged library for Sass along with Vanilla CSS. Transformicons are mostly powered by CSS however, a little piece of JavaScript is required to toggle the transformed states. It …

Turret is a responsive frontend framework build with LESS to normalize styles for default HTML elements, created by Scott de Jonge. Turret has a simple and intuitive grid system and responsive utility classes for quick development using logical and legible markup.Turret is …

This is a call-to-action button that animates and turns into a full-size modal window coded by Codyhouse.Modal windows are used to display related content, by hiding temporarily the main content. If we imagine our web page as layers distributed along the z-axis, …

Story Box is a plugin using CSS3 animations triggered while scrolling.This jQuery Extension works alone, you don’t need any Javascript Skills, Only HTML.Transitions are provided by Animate.CSS, they are smooth & awesome + 10 Zen Special Animations.The Exit Effects ( hide after …

Flickity is a carousel,slider,gallery library created by David DeSandro.Flickity makes galleries, sliders and carousels that feel lively and effortless. Start using Flickity in three steps. Download Flickity flickity.css and flickity.pkgd.min.js files Add the Flickity .css and .js files to your site Add …

This is a slide-in filter panel powered by CSS and jQuery and created by Codyhouse.It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates …

TheaterJS is a typing effect mimicking human behavior. – Everything you need to know is demonstrated and explained in this codepen. DEMO:The demo is also available on the TheaterJS page. See the Pen TheaterJS by Gabin Aureche (@Zhouzi) on CodePen. Features: Multiple …