MACRO NEPAL
Floating Card Login Form In HTML CSS AND JAVASCRIPT
awiskar acharya
September 26, 2025
9:01 am

Introduction

This code creates a modern floating login card with a soft shadow effect that “lifts” when hovered. The design is clean, professional, and suitable for web apps, dashboards, or personal projects. The interface is fully responsive and includes simple client-side login validation.

Features

  1. Floating Card Effect
    • The .login-card uses box-shadow and transform on hover to create a floating effect.
    • Subtle transitions make the movement smooth and visually appealing.
  2. Modern Input Fields
    • Input fields have soft borders, rounded corners, and a light background.
    • On focus, the border color changes to a bright blue, and a soft shadow appears around the field.
    • Placeholder text uses a muted gray color for readability.
  3. Login Button with Hover Effects
    • The submit button features a linear gradient and rounded corners.
    • Hovering slightly moves the button upwards and intensifies the shadow.
    • Active state reverts the shadow and position for a natural click feel.
  4. Error Message
    • A red error box appears below the button if credentials are invalid.
    • The box has a light red background with borders and rounded corners for clarity.
  5. Forgot Password Link
    • A subtle link below the form allows users to navigate if they forgot their password.
    • Hover changes the color for emphasis.
  6. Responsive Design
    • On screens smaller than 480px, the card’s padding reduces for better mobile display.
    • Maintains usability and aesthetics across devices.
  7. JavaScript Validation
    • Simple demo validation checks if username === "admin" and password === "password123".
    • Displays an alert on successful login or the error box for failed attempts.
    • Pressing Enter while focusing on an input triggers the login function.

How It Works

  1. HTML Structure
    • .login-card container holds the heading, form, and forgot password link.
    • Form contains two input fields and a submit button.
    • Error <div> is hidden initially.
  2. CSS Styling
    • Background is a subtle gradient.
    • The floating effect uses transform and box-shadow.
    • Inputs, buttons, and error messages are styled for clarity and interactivity.
  3. JavaScript Functionality
    • handleLogin() validates credentials.
    • Shows success alert or error message.
    • Listens for Enter key to submit the form.

Conclusion

This Floating Card Login Form is visually attractive, responsive, and interactive. Its floating effect, clean input design, and smooth transitions make it a professional and user-friendly login interface.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Card Login Form</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #eceff1 0%, #b0bec5 100%);
padding: 20px;
box-sizing: border-box;
}
.login-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.15);
padding: 40px;
width: 100%;
max-width: 400px;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.login-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 15px 25px rgba(0, 0, 0, 0.2);
}
.login-card h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
font-size: 28px;
font-weight: 600;
}
.form-group {
margin-bottom: 24px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 16px;
background: #f8f9fa;
color: #333;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #0288d1;
background: #fff;
box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.2);
}
.form-group input::placeholder {
color: #888;
}
.login-button {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #0288d1 0%, #0277bd 100%);
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(2, 136, 209, 0.3);
margin-top: 8px;
}
.login-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 136, 209, 0.4);
background: linear-gradient(135deg, #039be5 0%, #0288d1 100%);
}
.login-button:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(2, 136, 209, 0.2);
}
.error {
color: #d32f2f;
font-size: 14px;
text-align: center;
margin-top: 16px;
display: none;
padding: 10px;
background: #ffebee;
border-radius: 8px;
border: 1px solid #d32f2f;
}
.forgot-password {
text-align: center;
margin-top: 20px;
}
.forgot-password a {
color: #0288d1;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.forgot-password a:hover {
color: #01579b;
text-decoration: underline;
}
@media (max-width: 480px) {
.login-card {
padding: 30px 24px;
margin: 10px;
}
}
</style>
</head>
<body>
<div class="login-card">
<h2>Sign In</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<button type="submit" class="login-button">Sign In</button>
<div class="error" id="error-message">Invalid username or password. Please try again.</div>
</form>
<div class="forgot-password">
<a href="#">Forgot your password?</a>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
handleLogin();
});
function handleLogin() {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
// Simple demo validation
if (username === "admin" && password === "password123") {
alert("Login successful! Welcome to the dashboard.");
errorMessage.style.display = 'none';
} else {
errorMessage.style.display = 'block';
document.getElementById('password').focus();
}
}
// Add enter key support
document.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const activeElement = document.activeElement;
if (activeElement.tagName === 'INPUT') {
handleLogin();
}
}
});
</script>
</body>
</html>

HTML Login & Registration Forms – Parking / Management Systems & Modern UI Designs (Related to HTML Forms)

Login & Register Form for Park Management System with Dropdown:
This type of HTML form combines login and registration functionality for parking or park management systems. It often uses dropdown menus to switch between login and sign-up options in a single interface, making it more user-friendly and compact for web applications.
Read more: https://macronepal.com/blog/login-and-register-form-for-park-managmet-system-with-dropdown/

Dropdown Login Form for Parking System:
A dropdown login form allows users to select options like user type (admin/user) before logging in. This improves system control and is commonly used in parking management systems to separate different access levels.
Read more: https://macronepal.com/blog/drop-down-login-form-for-parking-system/

Dropdown Login Form for Park Management System:
Similar to parking systems, this login design uses dropdown selection to manage different roles such as staff, admin, or users. It simplifies authentication while improving system organization.
Read more: https://macronepal.com/blog/drop-down-login-form-for-park-managment-system/

Simple Login Form for Park Management System:
A basic login form built using HTML that includes fields like username and password. It is used for secure access to park management dashboards and is easy to design and implement.
Read more: https://macronepal.com/blog/simple-login-form-code-for-park-managment-system/

AI Style Glow Fullscreen Overlay Login Form:
This modern login form uses glowing UI effects and full-screen overlays to create an advanced and attractive design. It enhances user experience using CSS animations and visual effects.
Read more: https://macronepal.com/blog/ai-style-glow-fullscreen-overlay-login-form/

Glassmorphism Login Form:
Glassmorphism is a modern UI design style that uses blur, transparency, and frosted glass effects. It makes login forms look stylish and professional while maintaining readability.
Read more: https://macronepal.com/blog/what-is-glassmorphism-login-form/

Emoji Background Overlay Full Screen Login Form:
This login design uses emoji-based backgrounds with full-screen overlay effects to create a fun and engaging user interface while keeping login functionality simple.
Read more: https://macronepal.com/blog/emoji-background-overlay-full-screen-login-form/

Minimal Center Alignment Fullscreen Overlay Login Form:
A clean and minimal login form centered on the screen. It focuses on simplicity, proper alignment, and distraction-free user experience.
Read more: https://macronepal.com/blog/minimal-center-alignment-fullscreen-overlay-login-form/

Image Blur Focus Fullscreen Overlay Login Form:
This login design uses blurred background images with a focused login box in the center, improving visual depth and user attention on the form.
Read more: https://macronepal.com/blog/image-blur-focus-fullscreen-overlay-login-form/

Geometric Pattern Fullscreen Overlay Login Form:
A creative login form design that uses geometric patterns as backgrounds with overlay effects, giving a modern and structured visual appearance.
Read more: https://macronepal.com/blog/geometric-pattern-fullscreen-overlay-login-form/

Category : LOGIN FORM

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper