articles » current » css » login-and-register-form

CSS: Dark Mode Login and Register Form or Page

Combination dark mode login and register form in one using only HTML and CSS

Kill two birds with one stone with this solution for a login and registration form in one. It features a 3D flip between the login form and register form, and it has a slide-in-from-the-top animation.

For a similar themed contact form/page then see Dark Modern Contact Form.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Login/Register Form</title>
	<style>
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html,
	body {
		min-height: 100%;
	}
	body {
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		color: white;
		background-color: black;
		background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
							url(https://picsum.photos/id/2/1920/1080);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	div,
	form {
		background-color: inherit;
		/*position: relative;*/
	}
	section {
		display: flex;
		height: 100vh;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	.login-page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #334;
		visibility: hidden;
		opacity: 0;
		transition: .5s ease .5s;
	}
	.login-page .form {
		position: absolute;
		left: 50%;
		top: -500px;
		transform: translate(-50%, -50%);
		transition: .5s ease-in;
		width: 95%;
		max-width: 300px;
		padding: 10px;
		color: white;
	}
	.login-page:target .form {
		transition: .5s ease-in .5s;
		top: 50%;
	}
	.login-page:target {
		visibility: visible;
		opacity: 1;
		transition: .5s ease;
	}
	.login-page .form .close {
		text-align: right;
	}
	.login-page .form .close h1 {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 40px;
		text-align: center;
		border-radius: 50%;
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
	}
	.login-page .form .close a {
		text-decoration: none;
		color: white;
	}
	.login-page .form #register {
		display: none;
	}
	.login-page .form input,
	.login-page .form button {
		width: 95%;
		padding: 10px;
		margin: 5px 0;
		border: none;
		outline: none;
		letter-spacing: 1px;
		border-radius: 100vmax;
		background-color: #334;
		color: inherit;
	}
	.login-page .form input::placeholder {
		color: #667;
	}
	.login-page .form button:active,
	.login-page .form input {
		-webkit-appearance: none; /* fixes bug in Safari on iOS */
		box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
	}
	.login-page .form button {
		width: 50%;
		margin-top: 8px;
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
		letter-spacing: 3px;
		background-color: transparent;
	}
	.login-page .form #register + label {
		width: 100%;
		display: block;
	}
	.login-page .form #register + label span {
		display: inline-block;
		width: 49%;
		padding: 10px;
		margin: 10px 0;
		text-align: center;
		border-radius: 100vmax;
		letter-spacing: 3px;
		transition: .5s;
		cursor: pointer;
		border: none;
		outline: none;
	}
	.login-page .form #register + label .login {
		box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
	}
	.login-page .form #register + label .register {
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
	}
	.login-page .form #register:checked + label .login {
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
	}
	.login-page .form #register:checked + label .register {
		box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
	}
	.login-page .form .card {
		position: relative;
		width: 100%;
		height: 280px;
	}
	.login-page .form .wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}
	.login-page .form .front,
	.login-page .form .back {
		position: absolute;
		top: 5%;
		width: 100%;
		height: 90%;
		overflow: hidden;
		backface-visibility: hidden;
		transition: transform .5s;
		background-color: transparent;
		padding: 10px;
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
		border-radius: 30px;
		background-image: linear-gradient(135deg,#334,#445,#334);
	}
	.login-page .form .front {
		transform: perspective(100vmax) rotateY(0deg);
	}
	.login-page .form .back {
		transform: perspective(100vmax) rotateY(180deg);
	}
	.login-page .form #register:checked ~ .card .front {
		transform: perspective(100vmax) rotateY(-180deg);
	}
	.login-page .form #register:checked ~ .card .back {
		transform: perspective(100vmax) rotateY(0deg);
	}
	</style>
</head>
<body>

	<section>
		<h1><a href="#id-login-form">LOGIN</a></h1>
	</section>

	<div class="login-page" id="id-login-form">
		<div class="form">
			<div class="close">
				<h1><a href="#!">&times;</a></h1>
			</div>
			<input type="checkbox" id="register" />
			<label for="register">
				<span class="login">LOGIN</span>
				<span class="register">REGISTER</span>
			</label>
			<div class="card">
				<div class="front">
					<form action="/Login" method="post"><!-- LOGIN FORM -->
						<div class="wrap">
							<input type="email" name="email" autocomplete="off" placeholder="EMAIL" required />
							<input type="password" name="pwd" placeholder="PASSWORD" required />
							<button type="submit">LOGIN</button>
						</div>
					</form>
				</div>
				<div class="back">
					<form action="/Register" method="post"><!-- REGISTER FORM -->
						<div class="wrap">
							<input type="text" name="name" autocomplete="off" placeholder="NAME" required />
							<input type="email" name="email" autocomplete="off" placeholder="EMAIL" required />
							<input type="password" name="pwd" placeholder="PASSWORD" required />
							<input type="password" name="confirm" placeholder="CONFIRM PASSWORD" required />
							<button type="submit">REGISTER</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

Coding Video

https://youtu.be/ZxBjAsQp9jg


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE