How To Create Login Form In HTML and CSS | make Sign In Form
How to Make Responsive login form using only HTML, CSS fully responsive with hover effects.
HTML
The Providers
CSS
body { margin: 0; height: 100vh; width: 100vw; overflow: hidden; display: flex; align-items: center; color: #03a1fc; background-color: #fff; justify-content: center; background-image: url("https://img.freepik.com/free-vector/blue-pink-halftone-background_53876-99004.jpg"); background-size: cover; } .main { width: 350px; height: 550px; padding: 60px 35px 35px 35px; border-radius: 20px; background-color: #fff; font-family: sans-serif; font-weight: 700; } .logo { background-image: url("https://theproviders.tech/public/webasset/images/logo-theproviders.png"); background-repeat: no-repeat; width: 100%; height: 140px; margin: -50px 30px; } .title { text-align: center; font-size: 28px; color: #555; letter-spacing: .5px; margin: 35px; } .credentials { width: 100%; padding: 2px 5px 0px 5px; } .credentials input { border: none; outline: none; background: none; font-size: 18px; color: #555; padding: 20px 10px 20px 5px; letter-spacing: 1px; } .username { margin-bottom: 20px; border-bottom: 2px solid #c2c4c3; transition: .5s ease; } .username:hover { border-bottom: 3px solid #03a1fc; } .password { margin-bottom: 30px; border-bottom: 2px solid #c2c4c3; transition: .5s ease; } .password:hover { border-bottom: 3px solid #03a1fc; } .submit { outline: none; border: none; width: 100%; height: 60px; border-radius: 30px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; background-image: linear-gradient(to right, #56c1ff, #28adfa, #03a1fe); background-size: 200%; box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff; transition: .5s; } .submit:hover { background-position: right; } .link { margin: 10px; text-align: center; } .link a { color: #aaa; font-size: 15px; text-decoration: none; }
Conclusion
Download Code Files
How To Create Login Form In HTML and CSS | make Sign In Form | CSS Login Form Design | Source File
Description
How to Make Responsive login form using only HTML, CSS fully responsive with hover effects.
How to Make Responsive login form using only HTML, CSS fully responsive with hover effects.
HTML
The Providers
CSS
body { margin: 0; height: 100vh; width: 100vw; overflow: hidden; display: flex; align-items: center; color: #03a1fc; background-color: #fff; justify-content: center; background-image: url("https://img.freepik.com/free-vector/blue-pink-halftone-background_53876-99004.jpg"); background-size: cover; } .main { width: 350px; height: 550px; padding: 60px 35px 35px 35px; border-radius: 20px; background-color: #fff; font-family: sans-serif; font-weight: 700; } .logo { background-image: url("https://theproviders.tech/public/webasset/images/logo-theproviders.png"); background-repeat: no-repeat; width: 100%; height: 140px; margin: -50px 30px; } .title { text-align: center; font-size: 28px; color: #555; letter-spacing: .5px; margin: 35px; } .credentials { width: 100%; padding: 2px 5px 0px 5px; } .credentials input { border: none; outline: none; background: none; font-size: 18px; color: #555; padding: 20px 10px 20px 5px; letter-spacing: 1px; } .username { margin-bottom: 20px; border-bottom: 2px solid #c2c4c3; transition: .5s ease; } .username:hover { border-bottom: 3px solid #03a1fc; } .password { margin-bottom: 30px; border-bottom: 2px solid #c2c4c3; transition: .5s ease; } .password:hover { border-bottom: 3px solid #03a1fc; } .submit { outline: none; border: none; width: 100%; height: 60px; border-radius: 30px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; background-image: linear-gradient(to right, #56c1ff, #28adfa, #03a1fe); background-size: 200%; box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff; transition: .5s; } .submit:hover { background-position: right; } .link { margin: 10px; text-align: center; } .link a { color: #aaa; font-size: 15px; text-decoration: none; }
Conclusion
Recent Post
Most Popular Post
Categories
- HTML & CSS7
- Bootstrap4
- Login Forms8
- Sidebar Menu1
- Card Design1
- CSS Buttons2
- Social Media Buttons1
- Preloader or Loaders5
- Neumorphism Designs3
- Contact Forms6
- Responsive Footers7
- Javascript4
- Websites3
- Bootstrap Cards0
- Vanilla JavaScript1
- jQuery Effects0
- Bootstrap Sidebar Menus0
- CSS Sidebar Menus0
- Navigation Bars3
- Responsive Gallery3
- Responsive Feedback Page2
