Animated Login Form Using Only HTML and CSS

on

 Hello again, 

This article will lead you to how to create an animated LOGIN FORM using only HTML and CSS.

Requirements :

  • A Web browser
  • A Text editor
  • Basic knowledge of HTML & CSS.



To build this form we have to create two files in the same directory.

  1. Login.html
  2. Style.css

Once you created both files we will write HTML and CSS code into both files one by one
then we will be ready to launch our application in a web browser.

So, let's create the Login.html file and write the following code in it.

<html>
  <head>
      <title>Animated login form with only HTML + CSS</title>
      <link rel="stylesheet" href="style.css">
  </head>
<body>
  <h1 id="twc">THE WEB CRAFT</h1>
  <form method="post" action="">
    <h1>Login Form</h1>
    <input type="email" name="email" value="" placeholder="Email">
    <input type="password" name="password" value="" placeholder="password">
    <button type="submit" name="button">Login</button>
  </form>
</body>
</html>


Now Create a Style.css file and write the following code in it.


body {
    background: radial-gradient(circle, #ffeb3b 0%, #009688 100%);
    font-family: sans-serif;
}

#twc {
    color: aliceblue;
    text-shadow: 10px 10px 10px black;
    font-size: 50px;
    margin: 100px auto;
    width: 50%;
    text-align: center;
}

form {
    display: block;
    margin: 0 auto;
    max-width:550px;
    overflow: hidden;
    text-align: center;
    background: #607d8b66;
    border-radius: 5px;
    margin-top: 10vh;
    padding:35px;
}

form h1 {
    color:white;
    text-shadow:5px 6px 6px #767676;
}

form input[type="Email"], form input[type="password"], form button[type="submit"] {
    padding:15px;
    width:70%;
    margin-top: 20px;
    transition: .3s;
}

form button[type="submit"] {
    background: none;
    border: 1px solid #eee;
    color: #ffffff;
    width: 400px;
    border-radius: 35px;
    font-size: 25px;
    box-shadow: 0px 0px 5px #4e705f9e;
    cursor: pointer;
}

form input[type="Email"]:focus, form input[type="password"]:focus {
    width:450px;
    padding: 25px;
}

form button[type="submit"]:hover {
    background: aliceblue;
    color:teal;
    width: 100%;
}


All stuff is done now launch your Login.html file in any web browser to see the result.

Here is a link to video tutorial: https://youtu.be/G5i6FjRailE

Comments

Post a Comment