Creating an Animated Login Form Using HTML and CSS

Animated Login Form

Animated Login Form is one of the best user experiences in today’s digital age. A smooth and visually appealing login process can significantly enhance a website’s overall appeal. Fortunately, with HTML and CSS, you can create stunning animated login forms that captivate users from arrival. In this tutorial, I’ll walk you through the steps to design an animated login form and provide you with free source code to kickstart your project.

Why Animated Login Forms Matter

A login form is often the first interaction users have with a website. An animated login form not only adds visual interest but also communicates professionalism and attention to detail. Animation can guide users’ attention, provide feedback, and create a memorable experience, all of which contribute to higher engagement and retention rates.

Check Out Those Useful Articles

  1. Creating a Fully Responsive Navigation Menu using HTML and CSS
  2. Multiple Text Typing Animation Using HTML and CSS

  3. Responsive Registration Form Using HTML and CSS

Animated Login Form Using HTML and CSS (Source Code)

To implement this Animated Login Form on your website, adhere to these straightforward steps:

  1. Start by establishing a directory for your project. You have the liberty to name this folder as per your preference. Within this folder, we’ll generate the requisite files.

  2. Generate a new file titled index.html. It’s essential that the file be named “index” with the extension “.html”.

  3. Subsequently, craft another file named style.css. Once more, confirm that the file name is “style” with the extension “.css”.

First, Copy the bellow HTML code and paste the codes into your index.html file.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login Form</title>
    <!-- Custom CSS Link -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div class="border-line"></div>
        <form action="#">
            <h2>Sign in</h2>
            <div class="input-box">
                <input type="text" required="required">
                <span>Username</span>
                <i></i>
            </div>
            <div class="input-box">
                <input type="password" required="required">
                <span>Password</span>
                <i></i>
            </div>
            <div class="imp-links">
                <a href="#">Forget Password</a>
                <a href="#">Sign up</a>
            </div>
            <input type="submit" value="Login" class="btn">
        </form>
    </div>
</body>
</html>

Second, Copy the bellow CSS code and paste the codes into your style.css file.

				
					*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2c2b37;
}
.box{
    position: relative;
    width: 380px;
    height: 400px;
    background: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
}
.box::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 400px;
    background: linear-gradient(0deg,transparent,transparent,#019da8,#019da8,#019da8);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
}
.box::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 400px;
    background: linear-gradient(0deg,transparent,transparent,#019da8,#019da8,#019da8);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -3s;
}
.border-line{
    position: absolute;
    top: 0;
    inset: 0;
}
.border-line::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 400px;
    background: linear-gradient(0deg,transparent,transparent,#b7023e,#b7023e,#b7023e);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -1.5s;
}
.border-line::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 400px;
    background: linear-gradient(0deg,transparent,transparent,#b7023e,#b7023e,#b7023e);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -4.5s;
}
@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.box form{
    position: absolute;
    inset: 4px;
    background: #222;
    padding: 50px 40px;
    border-radius: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.box form h2{
    color: #fff;
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
}
.input-box{
    position: relative;
    width: 300px;
    margin-top: 35px;
}
.input-box input{
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: #23242a;
    font-size: 16px;
    letter-spacing: 1px;
    transition: 0.5s;
    z-index: 10;
}
.input-box span{
    position: absolute;
    left: 0;
    padding: 20px 0px 10px;
    pointer-events: none;
    color: #8f8f8f;
    font-size: 16px;
    letter-spacing: 1px;
    transition: 0.5s;
    z-index: 10;
}
.input-box input:valid ~ span,
.input-box input:focus ~ span{
    color: #fff;
    font-size: 12px;
    transform: translateY(-34px);
}
.input-box i{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.5s;
    pointer-events: none;
}
.input-box input:valid ~ i,
.input-box input:focus ~ i{
    height: 44px;
}
.imp-links{
    display: flex;
    justify-content: space-between;
}
.imp-links a{
    color: #ececec;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}
.imp-links a:hover{
    color: #fff;
}
.btn{
    width: 40%;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 45px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 10px;
    cursor: pointer;
}
.btn:active{
    opacity: 0.8;
}

Conclusion

Creating an animated login form using HTML and CSS is a fantastic way to elevate your website’s user experience. By incorporating subtle animations and thoughtful design elements, you can make a lasting impression on your visitors. Feel free to experiment with different animations and styles to find what works best for your project. And remember, the provided source code is yours to use and customize as you see fit. Happy coding!

Read more about Responsive Navigation menu.

Source Codes Download

Recent Posts

FAQs

Absolutely! The provided CSS file is fully customizable. You can adjust colors, fonts, sizes, and animations to align with your website’s branding.

No, this tutorial utilizes only HTML and CSS. There are no external dependencies or libraries needed.

While the tutorial focuses primarily on desktop implementation, the form structure and CSS can be adapted to create a responsive design suitable for various screen sizes.

Yes, you can extend the form by adding additional input fields or buttons. Simply modify the HTML structure and CSS styles accordingly.

While this tutorial covers the visual aspect of the login form, ensuring security involves implementing server-side validation and encryption techniques, such as HTTPS.

Share on Social Media

Related Articles

4 thoughts on “Creating an Animated Login Form Using HTML and CSS”

  1. 181974011d36e831ae360853432aaba3?s=50&d=mm&r=g
    octaviacoble

    Hi! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up. Do you have any methods to protect against hackers?

    Reply
    1. 746badb11f9ea405d02cc67f289e4cff?s=50&d=mm&r=g
      abdul_digital

      I’m sorry to hear about your experience with your WordPress blog being hacked. It’s indeed a frustrating situation to lose all your hard work due to such incidents. To protect your website against hackers, here are some methods you can implement:

      1. Keep WordPress Updated: Ensure that your WordPress installation, themes, and plugins are always up-to-date. Developers often release updates to fix security vulnerabilities, so keeping everything updated reduces the risk of exploitation.

      2. Use Strong Passwords: Use complex, unique passwords for your WordPress admin account, FTP, and hosting account. Avoid using easily guessable passwords like “password” or “123456.” Consider using a password manager to generate and store strong passwords securely.

      3. Install Security Plugins: There are several security plugins available for WordPress, such as Wordfence, Sucuri Security, and iThemes Security. These plugins offer features like firewall protection, malware scanning, login attempt limiting, and more.

      5. Implement Two-Factor Authentication (2FA): Enabling 2FA adds an extra layer of security by requiring users to provide a second form of verification, such as a code sent to their mobile device, in addition to their password.

      6. Limit Login Attempts: Limit the number of login attempts allowed to prevent brute force attacks. You can use plugins like Limit Login Attempts Reloaded to set restrictions on the number of login attempts from a single IP address.

      7. Disable File Editing: By default, WordPress allows administrators to edit theme and plugin files from the admin dashboard. Disable this feature to prevent unauthorized access to your website’s code. You can do this by adding the following line to your wp-config.php file:

      Copy code
      define(‘DISALLOW_FILE_EDIT’, true);

      8. Regular Backups: Always maintain up-to-date backups of your WordPress website. In case of a hack or any other issue, you can restore your website to a previous working state. You can use plugins like UpdraftPlus or BackupBuddy to automate the backup process.

      9. Secure Hosting: Choose a reputable hosting provider that prioritizes security. Look for hosts that offer features like SSL certificates, server-level firewalls, regular malware scanning, and security monitoring.

      10. Monitor File Changes: Keep an eye on any changes made to your website files. You can use security plugins or file integrity monitoring tools to detect unauthorized modifications.

      11. Stay Informed: Stay updated on the latest security threats and best practices for WordPress security. Joining forums, subscribing to security blogs, and following WordPress security experts on social media can help you stay informed about emerging threats and effective security measures.

      Implementing these security measures can significantly reduce the risk of your WordPress website being hacked and help protect your hard work.

      Reply

  2. Pingback: Responsive Portfolio Website with HTML, CSS, and JavaScript

  3. Pingback: Multiple Text Typing Animation Using HTML and CSS

Leave a Comment

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

Abdul Dev Logo footer

Abduldev’s portfolio website is designed to provide visitors with a comprehensive overview of my capabilities, experience, and expertise. I serve as a centralized hub where I can present my work samples, demonstrate my skills, and highlight my accomplishments in a visually appealing and user-friendly manner.

Useful Links

Contact Info

Follow me

Facebook Linkedin Instagram Twitter

Copyright© 2024 | abduldev

Scroll to Top