Animated Login Page Using Html And CSS | Floating Placeholder Text Animation

source

Floating Placeholder Text Animation-A well-designed login page enhances user experience and makes authentication smooth and engaging. Instead of using a plain input form, why not create a stunning animated login page with a floating placeholder text animation? 🚀

In this tutorial, we’ll create a beautiful 3D login form using pure HTML and CSS, featuring a modern floating label effect and a colorful gradient background. No JavaScript required! 🎨✨

✔ Better User Experience – Clean, smooth animations improve readability.
✔ Modern & Stylish – Enhances the aesthetic appeal of your website.
✔ No JavaScript Needed – Achieved with only HTML & CSS.
✔ Responsive & Lightweight – Works on all devices without extra scripts.

HTML Structure Of Floating Placeholder Text Animation

The HTML code consists of a container that holds the login form, including:

Two input fields (Username & Password) with floating labels.
A submit button styled for easy interaction.
Forgot Password & Signup links for navigation.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D Login Form | TechyTechs</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<form>
			<h2>Login</h2>
			<div class="inputBox">
				<input type="text" required="required">
				<span>Username</span>
				<i></i>
			</div>
			<div class="inputBox">
				<input type="password" required="required">
				<span>Password</span>
				<i></i>
			</div>
			<div class="links">
				<a href="#">Forgot Password</a>
				<a href="#">Signup</a>
			</div>
			<div class="inputBox">
				<input type="submit" value="Login">
			</div>
		</form>
	</div>
</body>
</html>

Breaking Down the HTML:

✔ Each input field has a <span> element that acts as a floating label.
✔ The <i> element is used for styling the underline animation.
✔ The Forgot Password & Signup links provide navigation options.
✔ The submit button is designed to blend with the form aesthetics.

CSS Of Floating Placeholder Text Animation

The CSS styles the form and adds the floating label effect, background gradients, and a 3D card-like appearance.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(45deg,#2196f3,#ff4685);
}
.container 
{
	position: relative;
	padding: 50px;
	background: #fff;
	box-shadow: -55px -55px 0 rgba(0,0,0,0.05);
}
.container::before 
{
	content: '';
	position: absolute;
	left: -20px;
	top: 0;
	width: 20px;
	height: 100%;
	background: #ccc;
	transform: skewY(45deg);
	transform-origin: bottom right;
}
.container::after 
{
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	height: 20px;
	width: 100%;
	background: #eee;
	transform: skewX(45deg);
	transform-origin: bottom right;
}
form 
{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.container h2 
{
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 20px;
}
.container .inputBox 
{
	position: relative;
	width: 300px;
	margin-top: 40px;
}
.container .inputBox input 
{
	position: relative;
	padding: 8px 10px;
	border: none;
	outline: none;
	width: 100%;
	background: transparent;
	color: #fff;
	font-size: 1.1em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	z-index: 2;
}
.container .inputBox span 
{
	position: absolute;
	left: 0;
	padding: 10px 0;
	pointer-events: none;
	font-size: 1em;
	transition: 0.5s;
	letter-spacing: 0.1em;
	color: #777;
	text-transform: uppercase;
}
.container .inputBox input:valid ~ span,
.container .inputBox input:focus ~ span
{
	color: #333;
	font-size: 0.85em;
	transform: translateY(-32px);
}
.container .inputBox i 
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(45deg,#2196f3,#ff4685);
	transition: 0.5s;
	pointer-events: none;
	z-index: 1;
}
.container .inputBox input:valid ~ i,
.container .inputBox input:focus ~ i
{
	height: 100%;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
}
.container .links
{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.container .links a 
{
	text-decoration: none;
	color: #2196f3;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-size: 0.75em;
}
.container .links a:nth-child(2)
{
	color: #ff4685;
}
.container .inputBox input[type="submit"]
{
	background: #2196f3;
	cursor: pointer;
	font-weight: 600;
}

How the Animation Works:

1️⃣ Floating Labels – When an input is clicked or filled, the label moves up for better visibility.
2️⃣ Gradient Underline – A stylish animated underline effect appears on focus.
3️⃣ 3D Form Effect – The login form has a unique 3D shadow effect for a modern UI.

🎯 When a user clicks the input field, the placeholder text floats up smoothly.
🎯 The gradient underline appears, making the form more interactive and stylish.
🎯 The background gradient adds a modern and colorful touch to the page.

Is this login page mobile-friendly?

Yes! The design is fully responsive and works on all screen sizes.

Can I customize the colors?

Absolutely! Modify the background and gradient values to match your brand.

Does this require JavaScript?

No! This animation is done entirely with HTML & CSS, making it lightweight and fast.

Can I add more fields (e.g., Email, Confirm Password)?

Yes! Just duplicate the <div class="inputBox"> and update the input types accordingly.

Conclusion

This animated login page combines floating label animations, gradient backgrounds, and 3D effects to create a modern and engaging UI. Try it out and enhance your website’s login experience today! 🚀

2 Comments

Leave a Reply Cancel reply

Trending Post

Quick Pages

Social

Table of Contents

Why Use an Animated Login Page?