Бывают очень разные как по дизайн форма входа, так и по стилистике эффекта, но основном мы видим стандартные, где по клику переходим на страницу или появляется модальное окно и в нем находится сама форма с кнопками перехода. Здесь немного по другому сделано, в плане появление, так как вы переходите на эту форму.
Это будет страница и самого верху появляется полностью элемент, где есть все данные, чтоб зашли под своим именем. А также все функций, чтоб отправить письмо на почту, но разве под каждую интернет площадку нужно выставить свои операторы, а сам каркас уже есть, который работает на чистом CSS, где будет возможность выставить тематический фон.
HTML
Код
<div class="kingepromis miseag">
<input type="text" name="email" id="email" placeholder="Email" pattern=""/>
<input type="password" name="password" id="password" placeholder="Password" />
<input type="button" value="Помогите!" />
<input type="submit" value="Авторизоваться" />
</div>
CSS
Код
.miseag {
margin: 0 auto;
}
.kingepromis {
width: 300px;
margin-top: 40vh;
}
.kingepromis input[type=text],
.kingepromis input[type=password] {
opacity: 1;
display: block;
border: none;
outline: none;
width: 280px;
padding: 10px;
margin: 20px 0 0 0;
border-radius: 2px;
}
.kingepromis input[type=text] {
animation: bounce 1s;
-webkit-appearance: none;
}
.kingepromis input[type=text]:focus:valid {
box-shadow: 0 0 0 10000px #2ecc71;
}
.kingepromis input[type=text]:focus:valid ~ input[type=button] {
background: #27ae60;
color: #2ecc71;
}
.kingepromis input[type=text]:focus:valid ~ input[type=submit] {
color: #2ecc71;
}
.kingepromis input[type=text]:invalid {
box-shadow: 0 0 0 10000px #e74c3c;
}
.kingepromis input[type=text]:invalid ~ input[type=button] {
background: #c0392b;
color: #e74c3c;
}
.kingepromis input[type=text]:invalid ~ input[type=submit] {
color: #e74c3c;
}
.kingepromis input[type=password] {
animation: bounce1 1.3s;
}
.kingepromis input[type=submit],
.kingepromis input[type=button] {
border: 0;
outline: 0;
padding: 13px 18px;
margin: 40px 0 0 0;
border-radius: 2px;
font-weight: 600;
animation: bounce2 1.6s;
}
.kingepromis input[type=submit] {
float: right;
background: #fff;
color: #34495e;
outline: none;
}
.kingepromis input[type=button] {
background: #2C3E50;
color: #34495e;
}
@keyframes bounce {
0% { transform: translateY(-250px); opacity: 0; }
}
@keyframes bounce1 {
0% { opacity: 0; }
40% { transform: translateY(-100px); opacity: 0;}
}
@keyframes bounce2 {
0% { opacity: 0; }
70% { transform: translateY(-20px); opacity: 0;}
}
Переходим и смотрим, как все выглядит.
Демонстрация
