Animated Login Form using HTML CSS

Hey, developers welcome to Day-2 of our 90Days 90Projects challenge. And in Day-2 we are going to create an Animated Login form using HTML and CSS.

In this Project when a user starts typing on the input area then the area will change its color. 

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

animated login form html css, animated login form codepen, animated login form codepen, animated login form with source code, animated login form css

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Animated Login Form </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="form-container">
        <h2 class="login-title"> Login </h2>
        <input type="text" name="text" class="userName" placeholder="username">
        <input type="password" name="password" class="userPassword" placeholder="password">
        <button class="loginBtn"> Login </button>
    </div>

    <!-- Animated Login form using HTML and CSS by raju_webdev [Geeks Help] -->
</body>
</html>



CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: black;
    color: white;
    width: 25rem;
    border-radius: 10px;
    padding: 5em 2rem;
    box-shadow: 0px 0px 20px 0px black;
    border: 1px solid black;
}

.login-title {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.userName,
.userPassword {
    text-align: center;
    border: 2px solid cyan;
    margin: 1rem;
    color: white;
    background: transparent;
    padding: 1rem 2rem;
    border-radius: 3rem;
    width: 15rem;
    font-size: 1.2rem;
    outline: none;
    transition: all .2s ease-in-out;
}

.userName:focus,
.userPassword:focus {
    width: 20rem;
    animation-name: colorChange;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes colorChange {

    0% {
        border-color: green;
        color: green;
    }

    10% {
        border-color: yellow;
        color: yellow;

    }

    20% {
        border-color: hotpink;
        color: hotpink;
    }

    30% {
        border-color: red;
        color: red;
    }

    40% {
        border-color: purple;
        color: purple;
    }

    50% {
        border-color: yellow;
        color: yellow;

    }

    60% {
        border-color: cyan;
        color: cyan;
    }

    70% {
        border-color: skyblue;
        color: skyblue;
    }

    80% {
        border-color: pink;
        color: pink;
    }

    90% {
        border-color: red;
        color: red;
    }

    100% {
        border-color: yellow;
        color: yellow;
    }
}

.loginBtn {
    background: transparent;
    border: 2px solid green;
    padding: 1rem 3rem;
    border-radius: 6rem;
    text-decoration: underline;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.loginBtn:hover {
    background: green;
    border: 2px solid green;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

11 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Great, I started yesterday this 90 days of coding challenge, I'm trying to become a full stack developer

    ReplyDelete
    Replies
    1. wow amazing man 🤩We wish all the best in your journey

      Delete
  2. Wow, superb projects bhai👏, i am also becoming a frontend developer , this projects are very useful for beginner and intermediate level Developer like me, should i just type code given in source code, or should i try to make this projects by my own ?, Please guide me 🙏

    ReplyDelete
    Replies
    1. Thank you so much brother glad to know that these projects are helpful for you 😊 I want to inform you that take an inspiration from this projects and then try to build it on your own and if you face any issue then come back to this page and check what you are missing and how you can re-build it. I hope this will help you in your frontend journey 🤗

      Delete
  3. Thanks for uploading awesome projects

    ReplyDelete
  4. Thanks for uploading project nice work

    ReplyDelete
  5. Thank you so much i have looking for projects like these before but was not able to find any. But now i can practice the front end part from this thankyou so much brother appriciate it.

    ReplyDelete
  6. Md Towsiful haque23 Nov 2023, 17:23:00

    I want to become a full stack developer can you help me to learn more and more?

    ReplyDelete
  7. pls add in react JS notes

    ReplyDelete
  8. may i please get the url to animated login as the above one is not loading

    ReplyDelete

Top Post Ad

Below Post Ad