CSS

Best 30+ Pure CSS Forms

Byfrontend October 18, 2023May 5, 2024

CSS Grid: Style Guide II

Author

Olivia Ng

Made With

HTML(PUG),CSS(SCSS),JS

Demo

Links

Sign In / Sign Up Slider Form

Author

Chantal

Made With

HTML,CSS,JS

Demo

Links

Animated Form

Author

Maxim Konoval

Made With

HTML,CSS,JS

Demo

Links

Building Responsive Forms With Flexbox

Author

Envato Tuts+

Made With

HTML,JS

Demo

Links

Beautiful CSS Forms with SVG radio buttons

Author

Angela Velasquez

Made With

HTML,CSS(SCSS)

Demo

Links

FORMS UI – RESPONSIVE CSS forms examples

Author

Hugh Balboa

Made With

HTML,CSS

Demo

Links

GentleForm Demo

Author

Gabin Aureche

Made With

HTML,CSS(SCSS),JS(BABEL)

Demo

Links

The prismatic forms

Author

Nour Saud

Made With

HTML,CSS(SCSS),JS

Demo

Links

Folded Paper Login Form

Author

Ryan Mulligan

Made With

HTML(PUG),CSS(SCSS)

Demo

Links

Urpinion — Form

Author

Christian Petersen

Made With

HTML,CSS(SCSS),JS

Demo

Links

Invision login – dribbble remake

Author

Mikael Ainalem

Made With

HTML,CSS,JS

Demo

Links

Login form UI Design

Author

Chouaib Belagoun

Made With

HTML,CSS(SCSS),JS(TYPESCRIPT)

Demo

Links

Animated Login and Sign up

Author

Hurick Krügner

Made With

HTML,CSS(SASS),JS

Demo

Links

Log in / Sign up

Author

@BrawadaCom

Made With

HTML(SLIM),CSS(SASS),JS

Demo

Links

Flat Login Form 3.0

Author

Andy Tran

Made With

HTML(PUG),CSS(SCSS),JS

Demo

Links

Multi Step Form with Progress Bar using jQuery and CSS3

Author

Atakan Goktepe

Made With

HTML,CSS,JS

Demo

Links

The search form with funny animation and clearing button

Author

Stas Melnikov

Made With

HTML,CSS

Demo

Links

See the Pen Login Box Concept by Jamie Coulter (@jcoulterdesign) on CodePen.

Just trying to do some login animations. Buggy on Firefox, fine in Chrome. Still need to tidy up and Optimize

Title:- Login Box Concept
Author:- Jamie Coulter
Made With:- HTML CSS

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Title:- Login Form
Author:- Tyler Fry
Made With:- HTML CSS

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

Title:- Login
Author:- Marco Biedermann
Made With:- HTML CSS

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Title:- Snake highlight
Author:- Mikael Ainalem
Made With:- HTML CSS

See the Pen Animated login form by Mohamed Boudra (@boudra) on CodePen.

Title:- Animated login form
Author:- Mohamed Boudra
Made With:- HTML CSS JAVASCRIPT

See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.

Title:- Material Compact Login Animation
Author:- Yusuf Bakir
Made With:- HTML CSS JAVASCRIPT

Pages: 1 2

CSS

45 CSS Text Glitch Effects from CodePen: Learn How to Create Your Own Glitch Effects

Byfrontend October 18, 2023October 18, 2023

Want to learn how to create your own CSS text glitch effects? Check out these 45 CSS text glitch effects from CodePen! These effects are easy to follow and can help you learn the basics of CSS animation and clip-path properties. See the Pen Glitch Hover Effect CSS by kkhenriquez (@kkhenriquez) on CodePen. Title:- Glitch…

CSS Charts & Graphs on CodePen

CSS | HTML

50+ Must-See CSS Charts & Graphs on CodePen

Byfrontend March 8, 2024March 23, 2024

Build interactive CSS charts & graphs from scratch using 50+ CSS code snippets. Gain valuable coding experience and explore various design possibilities. 1. Bar Graph by Champlow See the Pen Bar Graph byChaaampy(@Chaaampy) on CodePen. Author: Champlow Links: Source Code / DemoMade with: HTML CSS 2. This Pen is 19% HTML & 81% CSS by…

CSS

React Calendar Examples: 10+ Fun & Free Code Snippets

Byfrontend October 18, 2023October 18, 2023

React Calendar Examples In this post, we are going to discuss 10 of the most popular examples of React Calendar. These examples will help you understand how to use react-calendar in your own projects. See the Pen react-calendar-timeline demo by Marius Andra (@mariusandra) on CodePen. Title:- react-calendar-timeline demoAuthor:- Marius AndraMade With:- REACT See the Pen…

CSS

HOW TO: CSS Blur Background with 40+ Examples

Byfrontend October 18, 2023October 20, 2023

See the Pen Better blur/darken filter by Taylor Hunt (@tigt) on CodePen. Title :- Better blur/darken filterAuthor :- Taylor HuntMade with:- CSS HTML See the Pen Javascript 30 – 3 – CSS variables & JS by Mark Taylor (@Airster) on CodePen. Title :- Javascript 30 – 3 – CSS variables & JSAuthor :- Mark TaylorMade…

CSS Border Animation

CSS | HTML

25+ Best CSS Border Animation

Byfrontend November 14, 2019October 17, 2023

See the Pen Rotating border by Jesse B (@Chester) on CodePen. Title:- Rotating borderAuthor:- Jesse BMade With:- HTML CSS See the Pen Great button animation by Valentin Galmand (@valentingalmand) on CodePen. Title:- Great button animationAuthor:- Valentin GalmandMade With:- HTML CSS See the Pen Button Border Hover Effects by Sarath AR (@sarath-ar) on CodePen. Title:- Button…

CSS

CSS Infographics: 25+ Stunning Examples

Byfrontend March 1, 2024March 1, 2024

collection of 25+ captivating CSS infographics that showcase the power and versatility of CSS for data visualization. Gain inspiration for your own projects and explore the creative possibilities of CSS. 1. Responsive Infographic with Pure CSS by Ronny Siikaluoma See the Pen Responsive Infographic with Pure CSS bysiiron(@siiron) on CodePen. Author: Ronny Siikaluoma Links: Source…