Animated login form using HTML & CSS

techie blog
by techie blog April 10, 2023
Animated login form using HTML & CSS

Animated login form using HTML & CSS Example

An animated login form using HTML and CSS is a way to create a visually appealing and engaging login form for users. The animation can be used to provide feedback to the user, such as indicating that the login process is in progress or that there is an error in the login credentials. Here's a breakdown of the 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 Mohamed -->
</body>
</html>

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;
}


















techie blog




Posted by
techie blog














Post a Comment






0
Comments