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>
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!