Post
Ask Question

Creating 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.   margin: 0;  
  3. }  
  4. .main {  
  5.   background - color: #f7f7f7;  
  6.   max - width: 25 %;  
  7.   text - align: center;  
  8.   font - family: "Bauhaus 93";  
  9.   color: #06a7e2;  
  10.   margin-top: 2%;  
  11.   margin-left: 35%;  
  12. }  
  13. .in img {  
  14.   max-width: 60%;  
  15.   max-width: 60%;  
  16. } 
  17. .fm {  
  18.   display: block;  
  19.   color: # bdbdbd;  
  20.   font - family: "Castellar";  
  21.   margin - left: 2 %;  
  22.   margin - top: 2 %;  
  23.   padding: 2 %;  
  24.   width: 80 %;  
  25. }  
  26. .fm input {  
  27.   padding: 2 %;  
  28.   margin: 2 %;  
  29.   color: #06a7e2;  
  30.   width: 100%;  
  31. }  
  32. .btn {  
  33.   background-color: #06a7e2;  
  34.   color: white;  
  35.   text - decoration: none;  
  36.   padding: 15 px 32 px;  
  37.   border: none;  
  38.   font - size: 100 %;  
  39. }  
  40. .btn: hover {  
  41.   opacity: 0.9;  
  42. }  
  43. .bcon {  
  44.   width: 100 %;  
  45.   height: 100 %;  
  46. }  
  47. label {  
  48.   float: left;  
  49. }  
Output
 
a 
Next Recommended Reading How To Create A CSS Button In HTML