Donate - Buy me a Coffe Donate!

Share Form Login và Sign Up viết bằng HTML và CSS cực đẹp

chia sẻ mẫu Login và Sign Up ( Đăng kí và đăng nhập ) cực đẹp mắt cho website

Hí anh em! Nếu ban đang cần một mẫu Form Login và Sign Up cực đẹp cho website của bạn thì bạn không nên bỏ qua bài viết này.

Bài viết này mình sẽ giới thiệu cho anh em tham khảo một mẫu Form Login và Sign Up cực đẹp cho website.


Xem Demo

Trước tiên hãy xem Demo trước nhé!

Share code Form Login và Sign Up

Mình sẽ để code bên dưới.

HTML


<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
	<link rel="stylesheet" href="style.css">
	<link rel="JavaSctipt" href="script.js">
	<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>

<body>
<!--[ Form Login and Sign Up by CODETHINK ]-->
	<div class="main">  	
		<input type="checkbox" id="chk" aria-hidden="true">

			<div class="signup">
				<form>
					<label for="chk" aria-hidden="true">Sign up</label>
					<input type="text" name="txt" placeholder="User name" required="">
					<input type="email" name="email" placeholder="Email" required="">
					<input type="password" name="pswd" placeholder="Password" required="">
					<button>Sign up</button>
				</form>
			</div>

			<div class="login">
				<form>
					<label for="chk" aria-hidden="true">Login</label>
					<input type="email" name="email" placeholder="Email" required="">
					<input type="password" name="pswd" placeholder="Password" required="">
					<button>Login</button>
				</form>
			</div>
	</div>
</body>
</html>

    
CSS

  body {
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  font-family:'Jost',sans-serif;
  background-image:linear-gradient(to bottom,#302b62,#36387a,#394693,#3855ac,#3264c7,#3264c7,#3264c7,#3264c7,#3855ac,#394693,#36387a,#302b62);
}

.main {
  width:350px;
  height:500px;
  background:red;
  overflow:hidden;
  background:url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
  border-radius:10px;
  box-shadow:5px 20px 50px #000;
  background:rgba( 255,255,255,0.10 );
  box-shadow:0 10px 50px 0 rgb(31 38 135 / 20%);
  /* CHANGE THIS TO CHANGE THE BLUR AMOUNT */

            backdrop-filter:blur( 8.0px );
  -webkit-backdrop-filter:blur( 8.0px );
  border-radius:10px;
  border:1px solid rgb(255 255 255 / 15%);
  text-align:center;
}

#chk {
  display:none;
}

.signup {
  position:relative;
  width:100%;
  height:100%;
}

label {
  color:#fff;
  font-size:2.3em;
  justify-content:center;
  display:flex;
  margin:60px;
  font-weight:bold;
  cursor:pointer;
  transition:.5s ease-in-out;
}

input {
  width:60%;
  height:20px;
  background:#e0dede;
  justify-content:center;
  display:flex;
  margin:20px auto;
  padding:10px;
  border:none;
  outline:none;
  border-radius:5px;
}

button {
  width:60%;
  height:40px;
  margin:10px auto;
  justify-content:center;
  display:block;
  color:#fff;
  background:#312E67;
  font-size:1em;
  font-weight:bold;
  margin-top:20px;
  outline:none;
  border:none;
  border-radius:5px;
  transition:.2s ease-in;
  cursor:pointer;
}

button:hover {
  background:#005DC0;
}

.login {
  height:460px;
  background:#eee;
  border-radius:60% / 10%;
  transform:translateY(-180px);
  transition:.8s ease-in-out;
}

.login label {
  color:#573b8a;
  transform:scale(.6);
}

#chk:checked ~ .login {
  transform:translateY(-500px);
}

#chk:checked ~ .login label {
  transform:scale(1);
}

#chk:checked ~ .signup label {
  transform:scale(.6);
}

html,
body {
  height:100%;
  width:100%;
}
   

Kết luận

Một Form Login và Sign Up khá là đẹp bạn nên tham khảo nhé. Cảm ơn bạn đã đọc bài viết này!

Getting Info...

Đăng nhận xét

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.