A couple of pure CSS switches with a nice clean design and a monochromatic color palette. The switches do not use Javascript for the toggle action and instead, they make use of the checkboxes-label approach that only uses CSS for styling a setting the switches. Created by CodePen user Zed Dash.

This is a gradient hex color visualizer that works as a random color picker. It has a nice a fluid transition between changes that are activated through clicking on the random button. It is structured using HTML, plan CSS for its style and for the core gradient generator it uses Vue.JS with Tweenmax. Created by Codepen user Clément Roche.

This is a modal login form which takes inspiration from the one at Pinterest. It uses on-scroll and on-click actions for showcasing the login form box and does it with a smooth cover transition. It is structured using plain HTML, styled with the use of CSS precompiled through Sass, with actions created and controlled via Babel JS. Designed by CodePen user Mert Nerukuc.

This is a mobile UI Hamburger menu with a nice and fluid round transition. It was designed taking into account accessibility which is why it is in the bottom center of the screen. Created by CodePen user Stas Melnikov.

This is a set of five cards that dynamically resizes and expands on click. They are constructed out of plain HTML, with style and the use of CSS flexbox properties for easily resize and adapt the active card that JavaScript toggles on click. Created by CodePen user Zed Dash.

A pure CSS button effect that on hover resizes to take the container's width and expands the shape design of the arrow. It uses SCSS as precompiler but it does not use variables or statements from Sass, and it is structured with plain HTML. Created by CodePen user Katherine Kato.

This is an animated menu button with a sliding menu sidebar panel. It recursively uses CSS precompiled through Sass for animations and the general skewed sidebar layout and vanilla JavaScript for the toggle action on the hamburger menu and the sidebar slider itself. Created by CodePen user Yago Estévez.

This is a text mask transition effect for dynamically showcase slides, presentation, and displays on websites. It consists of a three-line paragraph masked and animated with SVG elements and GSAP which is an ultra high-performance, professional-grade animation framework for websites. Created by CodePen user Martí Fenosa.

This is a set of 5 social media buttons with a round profile and a floating effect. The visual effects and general round style of the buttons are achieved by the use of plain CSS, and structured with simple HTML (no JS was needed). Created by CodePen user Stockin.

This is an animated search form UI with some micro-interactions. Its layout is structured with HTML and its animations and graphics interface style are created by the use of plain CSS, with interactions and button actions controlled with jQuery. Created by CodePen user Himalaya Singh.

This is a set of four 3D tiled social buttons built using only CSS and HTML. On hover, an element showcases a nice lift achieved through CSS properties like vertical displacement with transform and the use of box-shadow. Created by CodePen user Stockin.

This is an On and Off button with a smooth morphing animation when toggled. It uses HTML for its basic structure, styled and animated with CSS, with all the motions and active states controlled via JavaScript. Created by CodePen user Dannie Vinther.

This is a Vue.js web application for streaming radio stations from Somafm. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also used Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station. Created by CodePen user Rainner Lins.

This is a set of two info cards with a fluid color hover effect. The hover transition is achieved by the use of CSS precompiled with Sass and manifest as a round color overlay progression that turns the card from a gray-scale filter to a vivid color. Created by CodePen user Yancy Min.

This is a set of 21 CSS progress bars made with SVG patterns. The progression of the bars is controlled with JavaScript, that initially sets the bars to a random value, and the bars are structured with HTML, with CSS which gives format and call the SVG patterns to showcase properly within the bars. Created by CodePen user Lucagez.

An interactive water drop effect using offscreen canvas elements. This effect is an adaptation from Neil Walli's Water Java Simulation, where you can create a fairly realistic water simulation by the implementation of a simple algorithm. Created by CodePen user Gerard Ferrandez.

An Apple devices slideshow created using JavaScript. The graphic elements (laptop, tablet, phone) are created using pure CSS as well as the transitions that are activated via JS. Created by Codepen user Comehope.

A responsive eCommerce grid concept using CSS Grid. The grid responsiveness is organized via JavaScript with CSS hover interactions that Skew and rotate the elements within the grid. Created by CodePen user Andy Barefoot.

5 hover effects created using pure CSS that works especially well on images. Each effect is showcased in a three card set, with fluid transitions and a frosty glass overlay effect. The cards are structured using HTML and are styled and fluidly animated using Sass CSS (No special Sass trait is used, only pure CSS). Created by CodePen user fox_hover.

This is a tab bar with a nice modern look and smooth transitions between tabs. When you select a tab option, it deploys a particle animation that sets into the active element and that changes depending on whether you are selectiong a close or a far element. The tab is structured using HTML, styled and animated with SCSS, and uses jQuery for the action selector and general effect deployment. Created by CodePen user Aaron Iker.

A 3D helix loader created using CSS animation attributes on Sass. It is structured using basic Slim HTML iterations for creating the elements and uses Sass functions for giving movement and variable proportions to the circular elements. Created by CodePen user Jerry Low.

This is a 3D text effect achieved by the use of a simple SCSS mixin. The mixin creates a 3D blocky looking text with features like text-shadows, gradients, and opacity. Created by CodePen user Liam Ega.

This is a pure CSS gooey morph animation effect. SVG is not involved in its structure and it is animated by primarily making use of border-radius, plus some opacity and basic transform CSS properties. Created by CodePen user Piotr Galor.

A responsive and colorful Profile Card concept. The card has a nice material design with some gradients textures on background and buttons. It is structured with HTML, styled with Sass CSS and makes use of JavaScript for controlling the actions on buttons. Created by CodePen user Muhammed Erdem.

A footer layout design with a fluid gooey/wavy motion created out of SVG elements . The animations are achieved by using only CSS properties and the structure is based primarily of SVG elements that are animated in different layers. Created by CodePen user Uwe Chardon.