PROWAREtech
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="#!">×</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
Comment
