PROWARE technologies
PROWARE technologies

Responsive Animated Login and Register Form 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 features a slide-in-from-the-top animation.

<!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;
	}
	body {
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		color: black;
		background-color: white;
	}
	p {
		margin: 1%;
	}
	div,
	form {
		background-color: inherit;
		position: relative;
	}
	header {
		height: 15vh;
		background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
							url(https://picsum.photos/id/4/1920/500);
		background-size: cover;
		background-position: center center;
	}
	header h1 {
		padding: 0 0 0 30px;
		line-height: 15vh;
		margin: 0;
	}
	.login-form {
		width: 90%;
		max-width: 300px;
	}
	.login-form .close {
		text-align: right;
	}
	.login-form .close a {
		display: inline-block;
		text-decoration: none;
		color: white;
		background-color: crimson;
		line-height: 30px;
		width: 30px;
		border-radius: 50%;
		text-align: center;
		font-weight: bold;
	}
	.login-form #register {
		display: none;
	}
	.login-form input,
	.login-form button {
		width: 100%;
		padding: 10px;
		margin: 0;
		border: none;
		outline: none;
		letter-spacing: 1px;
	}
	.login-form .front input {
		background-color:#b3f5b6;
	}
	.login-form .back input {
		background-color: wheat;
	}
	.login-form .front button {
		background-color: green;
		color: white;
	}
	.login-form .back button {
		background-color: orange;
		color: white;
	}
	.login-form #register + label {
		display: block;
	}
	.login-form #register + label .login,
	.login-form #register + label .register {
		display: inline-block;
		width: 49%;
		padding: 10px;
		margin: 10px 0;
		text-align: center;
		border-radius: 20px;
		letter-spacing: 3px;
		transition: .5s;
		cursor: pointer;
	}
	.login-form #register + label .login {
		background-color: green;
		border: 3px solid green;
		color: white;
	}
	.login-form #register + label .register {
		background-color: rgba(0,0,0,0.33);
		border: 3px solid orange;
		color: white;
	}
	.login-form #register:checked + label .login {
		background-color: rgba(0,0,0,0.33);
	}
	.login-form #register:checked + label .register {
		background-color: orange;
	}
	.login-form .form-container {
		padding: 0;
	}
	.login-form .form-container .card {
		position: relative;
		width: 100%;
		height: 300px;
	}
	.login-form .form-container .wrap {
		border-radius: 20px;
		overflow: hidden;
	}
	.login-form .form-container .front .wrap {
		background-color: #b3f5b6;
		border: 3px solid green;
	}
	.login-form .form-container .back .wrap {
		background-color: wheat;
		border: 3px solid orange;
	}
	.login-form .form-container .front,
	.login-form .form-container .back {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		backface-visibility: hidden;
		transition: transform .5s, opacity .5s;
	}
	.login-form .form-container .front {
		transform: perspective(1000px) rotateY(0deg);
		opacity: 1;
	}
	.login-form .form-container .back {
		transform: perspective(1000px) rotateY(180deg);
		opacity: 0;
	}
	.login-form #register:checked ~ .form-container .front {
		transform: perspective(1000px) rotateY(-180deg);
		opacity: 0;
	}
	.login-form #register:checked ~ .form-container .back {
		transform: perspective(1000px) rotateY(0deg);
		opacity: 1;
	}
	.login-page {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
							url(https://picsum.photos/id/2/1920/1080);
		background-size: cover;
		background-position: center center;
		visibility: hidden;
		opacity: 0;
		transition: .5s;
	}
	.login-page:target {
		visibility: visible;
		opacity: 1;
	}
	.login-form {
		position: absolute;
		left: 50%;
		top: -500px;
		transform: translate(-50%, -50%);
		transition: .5s ease-in .5s;
		background-color: transparent;
	}
	.login-page:target .login-form {
		top: 50%;
	}
	</style>
</head>
<body>
	<header>
		<h1>Acme, Inc</h1>
	</header>
	<p><a href="#id-login-form">login/register</a></p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, at quidem cum est et asperiores eaque autem exercitationem culpa ipsam unde porro dolorum. Quisquam dolor, maiores eaque blanditiis, ipsam sequi recusandae cupiditate ea labore possimus earum aspernatur impedit quia atque deleniti vitae at odit facere quam fugiat a. Sunt necessitatibus, aliquid nisi doloremque at rerum, repudiandae qui ad, ullam et omnis vel aspernatur fugiat quos? Odio rem tenetur molestias neque dolor ut, commodi nihil ab itaque earum ullam cumque reprehenderit enim inventore quaerat? Vel minima ullam dignissimos rem repellat incidunt inventore sed nemo illum labore nostrum fugit eligendi beatae vero omnis placeat, perspiciatis eius tempore tempora iusto et ipsum. Eum iste neque voluptate, a ullam accusantium obcaecati dolores itaque nihil. Odio sunt veniam pariatur at ullam, fugiat nihil, minus quae voluptates magni vero repudiandae quo non ad quos ex molestiae veritatis mollitia aut qui quisquam. Cumque esse est assumenda fugiat.</p>
	<p>Veniam veritatis fugiat quaerat aspernatur ipsum eos, perspiciatis eius quia saepe illo iure ab recusandae voluptate cum ad tempore maiores voluptas quasi aliquam enim deserunt beatae! Mollitia tenetur, illum fugiat ipsam vero placeat laudantium accusantium voluptatibus in pariatur illo nulla possimus nam consequuntur ratione. Optio quibusdam voluptatibus aspernatur vel consequatur et fuga dolore ducimus numquam consequuntur nam laboriosam incidunt, temporibus perspiciatis ipsa quidem cumque nobis, voluptatem veritatis amet sequi esse! Asperiores commodi doloremque error nesciunt? Enim ullam minima iste ducimus ipsam, maxime beatae nihil corporis earum quaerat dolores reiciendis, eligendi iusto aliquid aspernatur autem officiis! Dicta rerum repudiandae tempore excepturi labore explicabo modi ea, est reprehenderit asperiores ab alias fuga odit delectus hic veniam reiciendis ad cum. Facilis, molestiae voluptatum fugit eos commodi vitae labore aperiam provident voluptates perspiciatis architecto officiis libero molestias aliquid beatae ut veniam reprehenderit nisi magni enim non. Officia voluptatibus ut culpa vitae dicta numquam non?</p>
	<p>Dolorum suscipit consectetur quaerat cum blanditiis? Aliquid quaerat reprehenderit officiis molestiae adipisci molestias eligendi. Fuga, perferendis doloribus amet assumenda praesentium reiciendis adipisci a cupiditate explicabo atque tenetur quos nisi, incidunt obcaecati autem officia aspernatur excepturi quod id. Asperiores aliquam, repudiandae laboriosam delectus ratione modi provident in est impedit dicta quidem a! Omnis quidem rem quas dignissimos nobis obcaecati ratione? Itaque nemo blanditiis, quae eos atque voluptas, magnam commodi consequuntur quidem vero quia similique assumenda, architecto rerum esse optio? Neque odit ipsum quasi. Corporis, dolor. Atque, dolor sapiente? Accusamus maxime tempora minus labore, dolor facere ex consequuntur officiis nihil excepturi cum libero harum perspiciatis, quis autem illo deserunt inventore maiores dolorum? Ratione dicta vitae ut repudiandae. Dicta natus vitae magni, distinctio atque, corrupti esse architecto illo minus consectetur quas omnis aspernatur earum. Explicabo atque provident perspiciatis, quis vel autem. Cumque, dolorem officia a quidem vitae debitis dolorum nam rem minus dignissimos.</p>
	<p>Consequatur facere fugiat quis similique! Vero molestias voluptatibus pariatur excepturi veniam omnis quasi impedit minus voluptatem ipsa molestiae a eum, itaque quo amet reiciendis consequatur. Incidunt illum commodi atque minima repudiandae perspiciatis tempore nihil! Adipisci distinctio eligendi incidunt esse eos provident, optio atque consequuntur nemo! Nemo tempora laborum dicta! Provident cumque molestiae aut exercitationem nostrum! Sint blanditiis nulla optio voluptates tempore, adipisci doloribus. Id, nostrum perspiciatis quasi odio deserunt ducimus iusto. Ut, sint! Dolorem facere numquam consectetur delectus fuga id et beatae eos necessitatibus, expedita architecto mollitia eaque quia quae nihil rerum nisi ab placeat pariatur blanditiis quisquam impedit cupiditate? Pariatur, quo! Minima omnis neque dolorem eligendi cum, nemo distinctio voluptatibus perferendis! Beatae, fugit corporis cum debitis quidem dolorum ullam minima laudantium? Nesciunt temporibus nobis soluta numquam suscipit esse omnis, ex aut saepe aliquam id similique iste in porro eaque excepturi tenetur nemo officia obcaecati. Praesentium nemo similique necessitatibus dolores.</p>
	<p>Ad repellat fugit cum sint quisquam animi amet iusto in architecto eos quas nam earum, hic consequatur vero qui voluptates praesentium, culpa corporis saepe! Qui voluptatibus odit consequatur quam beatae in eligendi quo nulla natus atque perspiciatis veritatis, non veniam vero sunt, vel necessitatibus, repudiandae modi praesentium doloremque excepturi at doloribus. Odit veniam ea cumque maiores est maxime officia voluptatibus consequuntur. Deleniti in consequatur recusandae totam voluptatum provident dolor odit non! Nam similique iure dignissimos alias ratione accusantium dolorem, voluptatibus distinctio consectetur ducimus. Excepturi repudiandae doloribus perferendis quos saepe omnis enim harum voluptatibus, quis itaque tempora sunt consequuntur fuga at, architecto repellendus eligendi obcaecati ratione illo dolor dignissimos cum iure veniam atque. Mollitia, quasi nemo repudiandae eius exercitationem adipisci dolore praesentium tempore commodi harum nobis modi architecto nesciunt alias! Labore ratione consectetur necessitatibus vitae ea laboriosam dolor ullam officia, molestiae corrupti impedit omnis quaerat a eum asperiores fugit expedita voluptates.</p>
	<p>Qui aspernatur minima provident quas, ipsam corrupti omnis rem laudantium quidem voluptatum praesentium impedit, voluptate amet ea quaerat sequi dolore, nulla aliquam. Culpa iure nulla quae quisquam veniam maiores natus est deleniti provident modi temporibus repudiandae et consequatur facilis quaerat reprehenderit quia sunt, libero labore sed eius sint incidunt fuga unde! Autem officia odit recusandae saepe debitis fugiat deserunt beatae provident est libero veritatis eum dolore quae consequatur corporis voluptatibus error, earum id quaerat corrupti labore maxime aperiam aliquid. Temporibus hic sequi excepturi laborum ut voluptatum, fuga quidem qui unde veritatis pariatur cupiditate quibusdam sint dolorum saepe sapiente quis corporis omnis consequuntur cumque delectus ducimus exercitationem? Blanditiis consectetur earum consequatur quis quasi fugiat ea molestias aperiam quidem nisi quae voluptatem minus illo sequi neque unde animi, adipisci officiis alias? Harum magni fugiat laudantium tenetur. Aut inventore quo blanditiis repellat temporibus magnam delectus ab maiores molestiae nobis! Saepe commodi labore id!</p>
	<p>Unde iusto eligendi quae tempora autem suscipit dicta, quibusdam atque quo exercitationem. Quaerat expedita officia corrupti iste commodi vero deleniti praesentium accusamus rerum nihil sit, ab sed ipsa tenetur, facere voluptatum. Pariatur, placeat dolorum vel reiciendis dolorem consequatur natus aliquid, sequi unde accusamus nulla voluptate modi commodi ea eligendi deserunt minus accusantium nam ad repellat fugiat earum velit? Laborum esse animi consequatur accusamus quasi minima quos praesentium, distinctio ex modi, inventore ipsam consectetur eum dolore doloremque magnam illum. Laborum et iure facere voluptas illum officia totam eveniet, repellat inventore obcaecati ab blanditiis explicabo aut magnam modi enim, deserunt temporibus quisquam tenetur nihil deleniti optio! A non rerum autem, ea odit deserunt cumque recusandae numquam veritatis vel provident quibusdam velit dolorem illo similique amet itaque, doloremque cum ipsam! Praesentium blanditiis ipsam quia eius ex ducimus fuga repellat sed autem? Pariatur exercitationem corporis illum doloremque molestias aspernatur accusantium a earum doloribus modi.</p>
	<p>Tempora nesciunt animi rerum recusandae aperiam fugit cum assumenda quibusdam quam? Voluptate, aperiam. Deleniti nam autem tempora recusandae repudiandae veniam enim magni exercitationem animi expedita facere a maxime, iste libero ratione quia voluptatum laboriosam modi officiis atque? Iste saepe expedita qui vel. Illo repudiandae itaque aliquid, voluptatum similique soluta velit modi ex quod saepe sint suscipit illum incidunt unde ab ipsum atque at, amet quisquam a? Maiores numquam quidem laudantium ut reiciendis voluptatem delectus harum. Sint culpa sed consequatur harum, voluptatem ipsa consequuntur doloribus exercitationem temporibus nulla possimus, unde repellendus quam id voluptas magni ducimus fugit dolorem consectetur accusamus provident quos! In accusantium consequatur vitae! Non saepe quidem, minima aut ab impedit asperiores ipsam accusamus nam amet ullam maiores harum, debitis pariatur et molestiae ipsum! Suscipit est obcaecati ad non ipsa quam incidunt qui, facere ex blanditiis doloribus iusto necessitatibus vel, earum, vero cupiditate tempora animi rerum quod officia. Dicta?</p>
	<p>Dolore porro vero, amet quidem repellat repellendus voluptatum illum tenetur quos, enim, quo libero. Nesciunt aliquid voluptatum sint ab praesentium voluptates inventore neque maxime, a explicabo repellat sed hic beatae necessitatibus laboriosam exercitationem nemo eaque architecto adipisci quibusdam eveniet sapiente quae? Repellat quia libero voluptatibus dicta optio delectus vel quos ipsum? Aspernatur aut quasi provident magnam, pariatur repellendus necessitatibus sit veniam nostrum nisi accusamus eum nulla aliquam omnis explicabo autem quo maiores quia quos tempore quisquam porro eveniet. Corrupti, quod. Ex aut distinctio quidem nesciunt quae architecto, inventore consequuntur in ea excepturi veritatis tenetur temporibus et eos pariatur? Libero eos accusamus repellat facilis unde id autem, itaque expedita! Fuga impedit ipsa voluptatibus cupiditate possimus at aliquid suscipit eum, error illum nihil similique dicta itaque sint? Doloremque nesciunt, quod vel distinctio totam ipsam ut consectetur id illo eligendi deleniti quasi itaque. Accusamus iste asperiores porro quidem reprehenderit beatae officiis? Excepturi, in.</p>
	<p>Necessitatibus ut voluptates distinctio suscipit ea mollitia fugiat? Tenetur architecto laborum delectus nobis illum non vero perspiciatis corporis praesentium cupiditate? Eaque deserunt quibusdam nesciunt ex tempore repellat voluptate fuga, aperiam officiis nobis voluptatem, cumque, adipisci rem animi veniam aliquid. Quo exercitationem pariatur iusto rem similique, cumque error magni consequatur eaque nobis temporibus voluptatibus dolorum tenetur! Dignissimos commodi sit libero accusantium natus? Distinctio quod eaque molestiae ipsum dolorem vitae architecto optio est tempora, veritatis modi nihil? Non sequi saepe cupiditate consectetur repudiandae possimus, iure eveniet est ipsum fuga ut dolore facilis maxime incidunt dolores. Ullam quae, consequuntur non incidunt corporis dignissimos deleniti! Necessitatibus, numquam. Temporibus, sint a? Neque quae, qui nesciunt quos dicta quibusdam, sapiente quaerat blanditiis, magni ipsum laborum molestias officiis eius enim ut! Ab eum corporis quam reprehenderit hic perspiciatis, quas cumque fugiat, odio laudantium blanditiis? Quibusdam consequatur, minima sequi dolore atque maiores ea quisquam, rerum odio, quis labore!</p>
	<div class="login-page" id="id-login-form">
		<form action="/LoginOrRegister" method="post" class="login-form">
			<div class="close"><a href="#!">X</a></div>
			<input type="checkbox" name="register" id="register" /><!-- CHECK THIS VALUE ON THE SERVER TO KNOW TO PROCESS THE LOGIN OR REGISTRATION INPUT FIELDS -->
			<label for="register">
				<span class="login">LOGIN</span>
				<span class="register">REGISTER</span>
			</label>
			<div class="form-container">
				<div class="card">
					<div class="front">
						<div class="wrap">
							<input type="email" name="login_email" autocomplete="off" placeholder="EMAIL" />
							<input type="password" name="login_pwd" placeholder="PASSWORD" />
							<button type="submit">LOGIN</button>
						</div>
					</div>
					<div class="back">
						<div class="wrap">
							<input type="text" name="register_name" autocomplete="off" placeholder="NAME" />
							<input type="email" name="register_email" autocomplete="off" placeholder="EMAIL" />
							<input type="password" name="register_pwd" placeholder="PASSWORD" />
							<input type="password" name="register_confirm_pwd" placeholder="CONFIRM PASSWORD" />
							<button type="submit">REGISTER</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</body>
</html>

Coding Video

https://youtu.be/Qbyaxo2IXUQ