Cool Login Form in HTML CSS & JavaScript



Xin chào các bạn, hôm nay DevForum chia sẻ cho các bạn cách tạo Biểu mẫu đăng nhập thú vị với hình thức Hiển thị mật khẩu hoặc Ẩn tùy chọn trong HTML CSS & JavaScript.

1. HTML

								
Login Form
Forgot Password?

2. CSS

									@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
		body{
			margin: 0;
			padding: 0;
			background: radial-gradient(#a429bc,#9225a7,#7f2092);
			height: 100vh;
			overflow: hidden;
			font-family: 'Noto Sans TC', sans-serif;
		}
		.center{
			width: 430px;
			margin: 130px auto;
			position: relative;
		}
		.center .header{
			font-size: 28px;
			font-weight: bold;
			color: white;
			padding: 25px 0 30px 25px;
			background: #5c1769;
			border-bottom: 1px solid #370e3f;
			border-radius: 5px 5px 0 0;
		}
		.center form{
			position: absolute;
			background: white;
			width: 100%;
			padding: 50px 10px 0 30px;
			box-sizing: border-box;
			border: 1px solid #6d1c7d;
			border-radius: 0 0 5px 5px;
		}
		form input{
			height: 50px;
			width: 90%;
			padding: 0 10px;
			border-radius: 3px;
			border: 1px solid silver;
			font-size: 18px;
			outline: none;
		}
		form input[type="password"]{
			margin-top: 20px;
		}
		form i{
			position: absolute;
			font-size: 25px;
			color: grey;
			margin: 15px 0 0 -45px;
		}
		i.fa-lock{
			margin-top: 35px;
		}
		form input[type="submit"]{
			margin-top: 40px;
			margin-bottom: 40px;
			width: 130px;
			height: 45px;
			color: white;
			cursor: pointer;
			line-height: 45px;
			border-radius: 45px;
			border-radius: 5px;
			background: #5c1769;
		}
		form input[type="submit"]:hover{
			background: #491254;
			transition: .5s;
		}
		form a{
			text-decoration: none;
			font-size: 18px;
			color: #7f2092;
			padding: 0 0 0 20px;
		}						

3. JAVASCRIPT

													

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.