Creating Login Form In CSS

In this blog, you will learn how to create a login form in CSS.

Creating Login Form In CSS 

 
Here, we will use a few tags of HTML and some properties of CSS which are-
 
HTML tags
  • div
  • label
  • form etc
CSS property
  • margin
  • padding
  • text-align
  • color
  • background-color etc 
Let's start coding...
 
HTML code 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>login</title>  
  5.         <link rel="stylesheet" type="text/css" href="logincss.css">  
  6.         </head>  
  7.         <body>  
  8.             <div class="main">  
  9.                 <div class="in">  
  10.                     <h1>Login</h1>  
  11.                     <img src="log.png">  
  12.                         <form class="fm">  
  13.                             <label>User Id:</label>  
  14.                             <input type="text" value="Username">  
  15.                                 <br>  
  16.                                     <label>Password:</label>  
  17.                                     <input type="password" value="123">  
  18.                                     </form>  
  19.                                 </div>  
  20.                                 <div class="bcon">  
  21.                                     <button class="btn">Submit</button>  
  22.                                     <br>  
  23.                                     </div>  
  24.                                 </div>  
  25.                             </body>  
  26.                         </html>     
CSS code 
  1. body {  
  2.   margin0;  
  3. }  
  4. .main {  
  5.   background - color#f7f7f7;  
  6.   max - width25 %;  
  7.   text - align: center;  
  8.   font - family: "Bauhaus 93";  
  9.   color#06a7e2;  
  10.   margin-top2%;  
  11.   margin-left35%;  
  12. }  
  13. .in img {  
  14.   max-width60%;  
  15.   max-width60%;  
  16. .fm {  
  17.   displayblock;  
  18.   color: # bdbdbd;  
  19.   font - family: "Castellar";  
  20.   margin - left: 2 %;  
  21.   margin - top: 2 %;  
  22.   padding2 %;  
  23.   width80 %;  
  24. }  
  25. .fm input {  
  26.   padding2 %;  
  27.   margin2 %;  
  28.   color#06a7e2;  
  29.   width100%;  
  30. }  
  31. .btn {  
  32.   background-color#06a7e2;  
  33.   colorwhite;  
  34.   text - decoration: none;  
  35.   padding15 px 32 px;  
  36.   bordernone;  
  37.   font - size100 %;  
  38. }  
  39. .btn: hover {  
  40.   opacity: 0.9;  
  41. }  
  42. .bcon {  
  43.   width100 %;  
  44.   height100 %;  
  45. }  
  46. label {  
  47.   floatleft;  
  48. }  
Output
 
a