Animated Login Form Using Only HTML & CSS

 Animated Login Form Using Only HTML & CSS

Learn Html and CSS

Free Learning Course








Html Coding

<!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 Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form class="box" action="login.html" method="POST">
        <h1>Login</h1>
        <input type="text" name="" placeholder="username">
        <input type="text" name="" placeholder="password">
        <input type="submit" name="" value="Login">


    </form>
    
</body>
</html>

CSS Coding


body{
    margin0;
    padding0;
    font-familysans-serif;
    background#34495e;
}
.box{
    width300px;
    padding40px;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    background#191919;
    text-aligncenter;
}
.box h1{
    colorwhite;
    text-transformuppercase;
    font-weight500;
}
.box input[type = "text"],.box input[type = "password"]{
    border0;
    backgroundnone;
    displayblock;
    margin20px auto;
    text-aligncenter;
    border2px solid #3498dbpadding14px 10px;
    width200px;
    outlinenone;
    colorwhite;
    border-radius24px;
    transform.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
    width280px;
    border-color#2ecc71;
}
.box input[type = "submit"]{
    border0;
    backgroundnone;
    displayblock;
    margin20px auto;
    text-aligncenter;
    border2px solid #2ecc71
    padding14px 40px;
    outlinenone;
    colorwhite;
    border-radius24px;
    transform.25s
    cursorpointer;
}
.box input[type = "submit"]:hover{
    background#2ecc71;
}

Watch Video to learn how to make Animated Login Form

Clink to watch