TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

Design a Modern and Stylish Login Form using HTML and CSS

June 1, 2024 2 Min read CSS HTML
Stylish Login Form

This is a modern and stylish login form using HTML and CSS, featuring 3D effects, colorful fields, and a button. The “Not registered? Create an account” text is included below the button with a link.

HTML Code for Login Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="input-container">
                <input type="text" id="username" name="username" required>
                <label for="username">Username</label>
            </div>
            <div class="input-container">
                <input type="password" id="password" name="password" required>
                <label for="password">Password</label>
            </div>
            <button type="submit" class="login-btn">Login</button>
            <p class="register-link">Not registered? <a href="#">Create an account</a></p>
        </form>
    </div>
</body>
</html>

CSS Code for Login Form

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #f8b195, #f67280);
}

.login-container {
    background: #fff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    transform: perspective(1000px) rotateY(-10deg);
}

h2 {
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.input-container {
    position: relative;
    margin-bottom: 25px;
}

.input-container input {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 2px solid #ddd;
    background: #f9f9f9;
    border-radius: 5px;
    outline: none;
    transition: all 0.3s ease;
}

.input-container input:focus {
    border-bottom: 2px solid #f67280;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.input-container label {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: none;
    font-size: 14px;
    color: #aaa;
    transition: all 0.3s ease;
}

.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
    top: -10px;
    font-size: 12px;
    color: #f67280;
}

.login-btn {
    width: 100%;
    padding: 10px 20px;
    background: #f67280;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.login-btn:hover {
    background: #c06c84;
}

.register-link {
    margin-top: 15px;
    text-align: center;
    color: #555;
}

.register-link a {
    color: #f67280;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.register-link a:hover {
    color: #c06c84;
}

Tags:

  1. Modern Login Form Design
  2. Stylish User Authentication
  3. Responsive Login Interface
  4. 3D Effect Login Form
  5. Colorful Login Fields and Button
Related Post:
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
Create a Stylish Analog Watch with HTML, CSS, and JavaScript − Creating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock.
How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript − Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
Responsive Web Design with CSS: A Short Tutorial − Responsive web design is a crucial aspect of modern web development. It ensures that your website looks and functions well on a variety of devices,.
How to Create a Modern Stylish Accordion with Arrows Using Only HTML and CSS − This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect.
How to Create a Stylish and Modern HTML Select Field Using CSS − Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:.
Modern and Stylish Button with Gradient and Hover Effects − This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its.
Creating a Modern Responsive Menu with HTML & CSS Only − Learn how to design a stylish and modern website header section and responsive menu using just HTML and CSS, with a responsive menu that toggles.
Creating a Modern Button with Stylish Hover Effects Using CSS − This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will.
How to Create a Colorful Tic-Tac-Toe Game with HTML, CSS and JavaScript − Here’s a colorful Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript only. The game includes a restart button, winner message, and special effects for the.
Pure CSS Custom Modern and Stylish Checkboxes − Creating a custom modern and stylish checkboxes using pure CSS can enhance the visual appeal of your web forms. Here’s a simple and elegant checkboxes.