HomeHtml & Css ProjectAnimated Login Form Using HTML & CSS

Animated Login Form Using HTML & CSS

Hello friends, today in this blog you’ll learn Animated Login Form Using HTML & CSS . We’ll use Html & Css to create this Animated Login Form . Earlier I’ve shared a blog on Css Image Hover Effect Using Html Css | Css Image Card Hover Effect .

If You have any Problem so, I Also Created a full video tutorial on this Animated Login Form Using HTML & CSS you can see this tutorial .

Video Tutorial of ” Animated Login Form Using HTML & CSS “

You might like this:

Animated Login Form Using HTML & CSS [Source Codes]

To create this Animated Login Form First, you need to create Twoe files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Animated Login Form Using HTML & CSS from the given download button.

# HTML CODE

First, create a Html file (index.html) and paste the given codes in your CSS file.

<!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>
    <form class="box" action="index.html" method="post">
        <h1>Login</h1>
        <input type="text" name="" placeholder="username">
        <input type="password" name="" placeholder="Password">
        <input type="submit" name="" value="login">
    </form>    
</body>
</html>

# CSS CODE

Second, you create anCSS file(style.css) and paste the given codes in your CSS file.

/* COPYRIGHT- CODING WITH NICK*/

/* # ⚙️ Technology Used
1. HTML5
2. CSS3

# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A

## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟  to this 👆 Repository */

/************************************************/

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 #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;  
    cursor: pointer;
}
.box input[type = "submit"]:hover{
    background: #2ecc71;
}


/* COPYRIGHT- CODING WITH NICK*/

That’s all, now you’ve successfully created a Animated Login Form Using HTML & CSS . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.


Read More –

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

- Advertisment -

Categories