Cool CSS Animated Login Form with source code: You must have seen the login form online in many places. Some very simple and many others are animated form. So, Today I am sharing a simple animated login form source code. Basically, in this login forms background, I put two shapes and rotate them 360 deg infinite. Previously I had shared Registration form with validation. Yesterday I saw in a group one guy posted a login form screenshot that’s he create, And in comment section lot of people asking for source code. Then I realize I also have to post a login forms source code because Many people want that.
Some PHP Stuffs You May Like
Login System in PHP and MySQL | Complete Registration System
Build a Simple Quiz In PHP | Source Code
How To Make a CSS Animated Login Form?
It is easy to create you just have to good knowledge in HTML & CSS. First Create a form with two inputs, you can put many inputs as you want. However, I created two inputs first for username and second for password. Input example: <input type=”text” placeholder=”Username”>. Now you have to create a submit button for login. There are two methods to creating a submit button first is <button> </button> tag, second is <input type=”submit”> . In this submit buttons placeholder put login or sign in.
Now you have successfully created a form, Now you have to give style this form. create a file named style.css or any name you want. We can add CSS in HTML in two methods first is put CSS code inside <style></style> tag, Second create a sperate CSS file and link to HTML file. How to link CSS file in HTML? The answer is: Put <link rel=”stylesheet” href=”style.css”> in between your <head></head> tag. More info about HTML link tag
After that, declare styles of each tag and classes in your CSS file. There are many ways to do a job, In other words, everyone has a different style to do a job. I have given the source code for my duty now you should experiment with these codes for making it better.
Source Code Here Below:
Here are two files first login.html which is an HTML file second is style.css which is a CSS file.
First, Create a file name login.html or anything you want and paste these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <!--code by webdevtrick (webdevtrick.com) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Cool CSS Animated Login Form | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login"> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <button>Sign In</button> </form> </body> </html> |
Now create your second file named style.css and paste these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
/* Code By Webdevtrick (https://webdevtrick.com) */ body { font-family: "Asap", sans-serif; } .login { overflow: hidden; background-color: cyan; padding: 40px 30px 30px 30px; border-radius: 10px; position: absolute; top: 50%; left: 50%; width: 400px; transform: translate(-50%, -50%); transition: transform 300ms, box-shadow 300ms; box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2); } .login > input { font-family: "Asap", sans-serif; display: block; border-radius: 5px; font-size: 16px; background: white; width: 100%; border: 0; padding: 10px 10px; margin: 15px -10px; } .login > button { font-family: "Asap", sans-serif; cursor: pointer; color: #fff; font-size: 16px; text-transform: uppercase; width: 80px; border: 0; padding: 10px 0; margin-top: 10px; margin-left: -5px; border-radius: 5px; background-color: #F03033; transition: background-color 300ms; } .login > button:hover { background-color: #FB2326; } .login::before, .login::after { content: ''; position: absolute; width: 600px; height: 600px; border-top-left-radius: 40%; border-top-right-radius: 45%; border-bottom-left-radius: 35%; border-bottom-right-radius: 40%; z-index: -1; } .login::before { left: 40%; bottom: -130%; background-color: rgba(69, 105, 144, 0.15); animation: wawes 6s infinite linear; } .login::after { left: 35%; bottom: -125%; background-color: rgba(2, 128, 144, 0.2); animation: wawes 7s infinite; } @keyframes wawes { from { transform: rotate(0); } to { transform: rotate(360deg); } } |
Now You’re Done, You have successfully created an animated login form with HTML & CSS. I hope this post will be helpful or useful for you. If you have any query comment down below, I will give you a reply as soon as possible.
Thanks For Visiting, Keep Visiting.
Спасибо за информацию!!!!!
с удовольствием. пожалуйста, оставайтесь на связи.
[…] Cool CSS Animated Login Form Example With Source Code […]
[…] » Visit Now Mar 20, 2019 · Cool CSS Animated Login Form with source code: You must have seen the login form online in many places. Some very simple and many others are animated form. So, Today I am sharing a simple animated login form source code. Basically, in this login forms background, I put two shapes and rotate them 360 deg infinite.Author: Shaan […]