Beautiful Glass Login Form with HTML and CSS
Kosal Ang
Sat Jan 13 2024
Welcome to our tutorial on building a modern and attractive login form for your website. In this guide, we'll walk you through the steps to create a visually appealing form using simple HTML and CSS.
Setting Up the HTML Structure
Let's start by setting up the basic HTML structure for our login form. Create an HTML file and add the following code:
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Glass Login Form</title> 7 <!-- Add your styles here --> 8 </head> 9 <body> 10 <!-- Your content will go here --> 11 </body> 12</html> 13
Building the Login Form
Now, let's add the HTML code for the login form itself. Update your HTML file as follows:
1<div class="glass-container"> 2 <form class="login-form"> 3 <h2 class="form-title">Login</h2> 4 5 <div class="form-group"> 6 <input type="text" required placeholder="Username" /> 7 </div> 8 9 <div class="form-group"> 10 <input type="password" required placeholder="Password" /> 11 </div> 12 13 <div class="options"> 14 <div class="remember-me"> 15 <input type="checkbox" id="rememberMe" /> 16 <label for="rememberMe">Remember Me</label> 17 </div> 18 <div class="forgot-password"> 19 <a href="#">Forgot Password?</a> 20 </div> 21 </div> 22 23 <button type="submit" class="login-btn">Login</button> 24 25 <div class="register-link"> 26 <p>Don't have an account? <a href="#">Register</a></p> 27 </div> 28 </form> 29</div> 30
Styling the Login Form
Now, let's add the following styles within the tag in the section:
1*, 2:after, 3:before { 4 box-sizing: border-box; 5} 6::placeholder { 7 color: #fff; 8 opacity: 1; 9} 10 11body { 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 height: 100vh; 16 margin: 0; 17 background: url(bg.svg) #333; 18 background-size: cover; 19 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 20 font-size: 14px; 21 overflow: hidden; 22} 23 24.glass-container { 25 position: relative; 26 width: 320px; 27 padding: 30px; 28 background: rgba(255, 255, 255, 0.1); 29 border-radius: 10px; 30 backdrop-filter: blur(10px); 31 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 32 border: 1px solid rgba(255, 255, 255, 0.2); 33 overflow: hidden; 34} 35 36.login-form { 37 display: flex; 38 flex-direction: column; 39 gap: 20px; 40} 41.form-title { 42 margin: 0; 43 color: #fff; 44 text-align: center; 45} 46 47.form-group { 48 position: relative; 49} 50 51.form-group input { 52 width: 100%; 53 padding: 10px 20px; 54 border: none; 55 border: 1px solid rgba(255, 255, 255, 0.2); 56 border-radius: 50px; 57 background: transparent; 58 color: #fff; 59 outline: none; 60 font-size: 16px; 61} 62 63.options { 64 display: flex; 65 justify-content: space-between; 66 align-items: center; 67} 68 69.remember-me, 70.forgot-password { 71 display: flex; 72 align-items: center; 73 color: #fff; 74} 75 76.forgot-password a { 77 text-decoration: none; 78 color: #fff; 79} 80 81.remember-me input { 82 margin-right: 5px; 83} 84 85.login-btn { 86 background-color: #fff; 87 color: #333; 88 border: 1px solid rgba(255, 255, 255, 0.2); 89 font-weight: bold; 90 padding: 10px; 91 border-radius: 30px; 92 cursor: pointer; 93 transition: background-color 0.3s; 94} 95 96.login-btn:hover { 97 background-color: #eee; 98} 99 100.register-link { 101 text-align: center; 102 color: #fff; 103} 104.register-link a { 105 color: #fff; 106} 107
Conclusion
Congratulations! You've created a functional and visually appealing login form. Feel free to customize the styles, colors, and layout to match your website's design. Remember, a user-friendly form is crucial for a positive experience. Happy coding!