Login Form with HTML and CSS Animation

Login form with HTML and CSS with animation of boxes and this is the look and feel rich.

Preview:

 

HTML CODE:

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Animated Login Form</title>

</head>

<body>

    <form class="box" action="log.html" method="POST">

        <h1>Login To MD</h1>

        <input type="text" name="" placeholder="Username">

        <input type="password" name="" placeholder="Password">

        <input type="submit" name="" value="Login">

    </form>

    

</body>

</html>

CSS CODE:

style.css

body{

    margin: 0;

    padding: 0;

    font-family: sans-serif;

    background: #34495e;

}

.box{

    width: 300px;

    padding: 40px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: #191919;

    text-align: center;

}

.box h1{

    color: white;

    text-transform: uppercase;

    font-weight: 500;

}

.box input[type = "text"],.box input[type = "password"]{

    border: 0;

    background: none;

    display: block;

    margin: 20px auto;

    text-align: center;

    border: 2px solid #3498db;

    padding: 14px 10px;

    width: 200px;

    outline: none;

    color: white;

    border-radius: 24px;

    transition: 0.25s;

}

.box input[type = "text"]:focus,.box input[type = "password"]:focus{

    width: 280px;

    border-color: #2ecc71;

}

.box input[type = "submit"]{

    border: 0;

    background: none;

    display: block;

    margin: 20px auto;

    text-align: center;

    border: 2px solid #3498db;

    padding: 14px 40px;

    outline: none;

    color: white;

    border-radius: 24px;

    transition: 0.25s;

    cursor: pointer;

}

.box input[type = "submit"]:hover{

    background: #2ecc71;

    border-color: #2ecc71;

}

Download all files from here:

Download

-By CodeStudio