This is a collection of 18 toggle buttons which can be used in any kind of website. The switches are designed and animated using CSS without any JavaScript. Created by CodePen user Himalaya Singh.

A simple rotation-based previous/next slider navigation. The card transitions are smooth with a nice rotational effect, achieve by controlling the angles with JavaScript and styled with CSS preprocessed through SCSS. Created by CodePen user Adrian Payne.

This is an awesome text effect that mix randomized characters into any sentence or text string. It mainly uses Zepto.JS (basically like using jQuery) for managing the strings messages and code characters that are used in the mixing process. It is also styled with CSS precompiled with SCSS for adding a bit of color and format. Created by CodePen user Lauri.

A 3D bar chart card showing weekly step counts when On-click. It is structured with HTML, styled and animated with CSS complied through SCSS, and the On-click action is created via TypeScript. Designed by CodePen user Steve Gardner.

This is a travel landing page made with Flexbox, CSS Grid, and vanilla JavaScript. It has a nice looking slider and a general style that makes good use of color and space. Created by CodePen user Katherine Katotravel.

This is a 3D rotational effect applied to an image gallery. It uses mainly rotate3D CSS attribute to rotate the images and JavaScript for adding dynamism to the transitions. Created by CodePen user ycw.

This is an exploding card effect achieved by using Disintegrate.js library. In the example, when a card is discarded, a rough particle animation is showcased while in the process of elimination and that effect is achieved using only the defaults attributes of the library. Created by CodePen user Zach Saucier.

A simple SVG morphing transition created with Anime.js. The button action showcases a fluid transition that ends with the transformation of the container and reveals the subjacent information. It is Styled with SCSS and structured with basic HTML where the SVG elements are placed. Created by CodePen user Paolo Duzioni.

This is a search bar design with emphasis on UX. The input section adapts to the written text and while querying the search, a delightful animation is showcased. It surely would work well with an ajax search to fetch the results first. Created by CodePen user Aaron Iker, based on dribble user Gale G's design.

This is a card slider for news and blog pages created with swiper.js. It is responsive and has fluid animations when the mouse hovers a card or when the slide changes. It is structured with HTML, styled with SCSS and all the interactions are set up by using Swiper.js and jQuery. Created by CodePen user Muhammed Erdem.

A resume template design with interactive features. Created to be showcased as a complement or section in a website portfolio. It is structured using HTML, styled with SCSS, and interactivity with jQuery. Created by CodePen user Naomi Weatherford.

A highlight text effect created using pure CSS. It is simple, yet stylish enough to improve the reading experience without obstructing or distracting the readers. Created by CodePen user Shelaine Roustio.

This is a Parallax 3D effect, achieved by an arrange of images in HTML and pure CSS, using transforms and keyframe animations on the images. Created by CodePen user Samuelllr.

A payment form built with a simple SVG that changes values as the user fills out the form. It is created using vanilla JS and the imask.js library, with regex patterns to detect the credit card type as the user is inputting values and adequately applies the appropriate spacing associated with that brand. Created by CodePen user Adam Quinlan.

This is a set of 12 patterns in a grid arrangement showcasing the use of CSS-Doodle with CSS Linear-gradient properties. Created by CodePen user yuanchuan.

An image hover effect showcasing off splittingJS which is a JavaScript micro-library for splitting elements by words, characters, children and more. When hovering over the images, the split elements are skewed and slightly spaced to create a sort of window-blind effect. Created by CodePen user flowuhh.

This is a responsive slider for featured blog posts that can also be used for other things like card sliders and gallery sections. It is built with Swiper slider which is a JavaScript library for slider creation, styled using CSS and structured with simple HTML. Created by CodePen user Muhammed Erdem.

This is a pure CSS 3D image effect that showcases hidden planes that are going to be shown 1 by 1 when hovering over an image in a gallery. It essentially flips the planes with a smooth motion, one after another with an arranged delay, and on mouseOut, it just transits backward. Created by CodePen user ycw.

This is a beautiful set of bird stamps created with pure CSS by using simple shapes like ovals, skewed rectangles with box-shadows and linear gradients. Created by CodePen user Siddharth Hubli who took inspiration from the artwork of Behance user Mike.

A set of 4 menu transitions created solely using CSS to do a menu "hamburger" transition using checkbox properties. Created by CodePen user Nathan Schmidt.

An HTML table made responsive using only raw CSS. On mobile view, the header row is fixed to the left and the content is scrollable horizontally. Created by CodePen user Flor Antara.

A set of cool text effects made with CSS. The effects show different uses for text overlays like as offset text-shadow and the use of halftone patterns as underlay shadow. Created by CodePen user Flowuhh.

This is a Gantt chart concept made with CSS-grid. You can modify the chart by using the grid column property within the CSS file to span a new entry across the grid. The chart is structured with raw HTML and the CSS is precompiled through SCSS. Created by CodePen user Phil.

This is a search bar that on click expands to showcase the input area and featuring a smooth loading animation when querying the search. The on-click and search bar actions are processed through Javascript and the animations are created with CSS composed with Sass. Created by CodePen user Aaron Iker.

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of brightness, contrast, blur, saturation, and color while the image on top showcases the changes in real time. Created by CodePen user Andreas Wik.