Форма регистрации и входа на сайт
Интересный вариант формы входа и регистрации с плывущими звёздами.
По умолчанию открыта форма входа, по нажатию на кнопку регистрации форма переключится на регистрацию. Для переключения используем небольшой скрипт, а для звёзд svg.
Для начала сама структура:
<div class="layout" id="app">
<div class="container container--login">
<form class="form">
<h2 class="form_title">
Account Login
</h2>
<div class="form_group">
<label class="form_label" for="username">Username</label><input class="form_input" id="username" name="username" type="text" value="">
</div>
<div class="form_group">
<label class="form_label" for="password">Password</label><input class="form_input" id="password" name="password" type="password" value="">
</div>
<div class="form_group">
<div class="form_checkbox">
<input id="checkbox" type="checkbox"><label class="form_checkbox" for="checkbox">Remember Me</label>
</div>
<a class="form_recovery" href="#">Forgot Password?</a>
</div>
<div class="form_group">
<a class="form_btn">Log In</a>
</div>
<div class="form_link">
<a class="form_btn-register" onclick="openRegister()">Register</a>
</div>
</form>
</div>
<div class="container container--register">
<form class="form">
<h2 class="form_title">
Register Account
</h2>
<div class="form_group">
<label class="form_label" for="r-username">Username</label><input class="form_input" id="r-username" name="username" type="text">
</div>
<div class="form_group">
<label class="form_label" for="r-password">Password</label><input class="form_input" id="r-password" name="password" type="password">
</div>
<div class="form_group">
<label class="form_label" for="rc-password">Confirm Password</label><input class="form_input" id="rc-password" name="password" type="password">
</div>
<div class="form_group">
<label class="form_label" for="email">Email Address</label><input class="form_input" id="email" name="email" type="email">
</div>
<div class="form_group">
<a class="form_btn">Register</a>
</div>
<div class="form_link">
<a class="form_btn-login" onclick="openLogin()">Log In</a>
</div>
</form>
</div>
<div class="links-bottom">
<a href="#">Terms of Service, </a><a href="#">Privacy policy</a>
</div>
<div class="bg-svg">
<svg width="1275" height="1163" viewBox="0 0 1275 1163" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)"><circle cx="517" cy="941" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="574" cy="862" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="653" cy="989" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="710" cy="878" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="661" cy="767" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="812" cy="893" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="961" cy="1129" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1053" cy="1023" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="968" cy="776" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1007" cy="641" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="786" cy="348" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="865" cy="475" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="922" cy="364" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="873" cy="253" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1024" cy="379" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1173" cy="615" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1265" cy="509" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1180" cy="262" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1219" cy="127" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="250" cy="231" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="329" cy="358" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="386" cy="247" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="337" cy="136" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="488" cy="262" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="637" cy="498" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="729" cy="392" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="644" cy="145" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="683" cy="10" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="10" cy="650" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="89" cy="777" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="146" cy="666" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="97" cy="555" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="248" cy="681" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="397" cy="917" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="445" cy="1111" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="59" cy="1153" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="181" cy="975" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="441" cy="699" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1193" cy="845" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1243" cy="1151" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="708" cy="679" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="60" cy="245" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="116" cy="33" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="828" cy="63" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="1016" cy="167" r="1" fill="#7A9FFF"></circle></g>
<g filter="url(#filter)"><circle cx="941.704" cy="761.577" r="2.5" transform="rotate(-89.7249 941.704 761.577)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="862.979" cy="704.199" r="2.5" transform="rotate(-89.7249 862.979 704.199)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="990.357" cy="625.809" r="2.5" transform="rotate(-89.7249 990.357 625.809)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="879.631" cy="568.277" r="2.5" transform="rotate(-89.7249 879.631 568.277)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="768.398" cy="616.743" r="2.5" transform="rotate(-89.7249 768.398 616.743)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="895.121" cy="466.35" r="2.5" transform="rotate(-89.7249 895.121 466.35)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="1131.83" cy="318.485" r="2.5" transform="rotate(-89.7249 1131.83 318.485)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="1026.28" cy="225.977" r="2.5" transform="rotate(-89.7249 1026.28 225.977)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="778.871" cy="309.79" r="2.5" transform="rotate(-89.7249 778.871 309.79)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="644.06" cy="270.143" r="2.5" transform="rotate(-89.7249 644.06 270.143)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="350.003" cy="489.734" r="2.5" transform="rotate(-89.7249 350.003 489.734)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="477.38" cy="411.344" r="2.5" transform="rotate(-89.7249 477.38 411.344)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="366.655" cy="353.812" r="2.5" transform="rotate(-89.7249 366.655 353.812)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="255.421" cy="402.279" r="2.5" transform="rotate(-89.7249 255.421 402.279)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="382.145" cy="251.885" r="2.5" transform="rotate(-89.7249 382.145 251.885)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="618.857" cy="104.02" r="2.5" transform="rotate(-89.7249 618.857 104.02)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="513.3" cy="11.512" r="2.5" transform="rotate(-89.7249 513.3 11.512)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="265.895" cy="95.325" r="2.5" transform="rotate(-89.7249 265.895 95.325)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="131.084" cy="55.6776" r="2.5" transform="rotate(-89.7249 131.084 55.6776)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="230.431" cy="1025.17" r="2.5" transform="rotate(-89.7249 230.431 1025.17)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="357.808" cy="946.776" r="2.5" transform="rotate(-89.7249 357.808 946.776)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="247.083" cy="889.244" r="2.5" transform="rotate(-89.7249 247.083 889.244)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="135.849" cy="937.711" r="2.5" transform="rotate(-89.7249 135.849 937.711)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="262.573" cy="787.317" r="2.5" transform="rotate(-89.7249 262.573 787.317)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="499.286" cy="639.452" r="2.5" transform="rotate(-89.7249 499.286 639.452)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="393.728" cy="546.944" r="2.5" transform="rotate(-89.7249 393.728 546.944)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="146.323" cy="630.757" r="2.5" transform="rotate(-89.7249 146.323 630.757)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="11.512" cy="591.11" r="2.5" transform="rotate(-89.7249 11.512 591.11)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="648.274" cy="1267.17" r="2.5" transform="rotate(-89.7249 648.274 1267.17)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="775.651" cy="1188.79" r="2.5" transform="rotate(-89.7249 775.651 1188.79)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="664.926" cy="1131.25" r="2.5" transform="rotate(-89.7249 664.926 1131.25)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="553.692" cy="1179.72" r="2.5" transform="rotate(-89.7249 553.692 1179.72)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="680.416" cy="1029.33" r="2.5" transform="rotate(-89.7249 680.416 1029.33)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="917.128" cy="881.461" r="2.5" transform="rotate(-89.7249 917.128 881.461)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="1111.36" cy="834.392" r="2.5" transform="rotate(-89.7249 1111.36 834.392)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="1151.5" cy="1220.59" r="2.5" transform="rotate(-89.7249 1151.5 1220.59)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="974.091" cy="1097.74" r="2.5" transform="rotate(-89.7249 974.091 1097.74)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="699.342" cy="836.414" r="2.5" transform="rotate(-89.7249 699.342 836.414)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="848.951" cy="85.1243" r="2.5" transform="rotate(-89.7249 848.951 85.1243)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="1155.19" cy="36.5941" r="2.5" transform="rotate(-89.7249 1155.19 36.5941)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="680.624" cy="569.322" r="2.5" transform="rotate(-89.7249 680.624 569.322)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="243.518" cy="1215.23" r="2.5" transform="rotate(-89.7249 243.518 1215.23)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="31.7896" cy="1158.21" r="2.5" transform="rotate(-89.7249 31.7896 1158.21)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="65.2075" cy="446.366" r="2.5" transform="rotate(-89.7249 65.2075 446.366)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<g filter="url(#filter)"><circle cx="170.109" cy="258.867" r="2.5" transform="rotate(-89.7249 170.109 258.867)" fill="#7AAFFF" fill-opacity="0.3"></circle></g>
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.266666667 0 0 0 0 0.694117647 0 0 0 0 0.607843137 0 0 0 0.7 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
</svg>
</div>
</div>
Если вам не нужна вторая форма, то от неё можно избавиться, удаляем весь блок с классом container--register и onclick="openRegister()" у кнопки регистрации.
Со структурой вроде понятно, теперь стилизация.
Для начала добавить стили для главного блока, в нём же объявим цвет кнопок и ссылок.
.layout {
--color: #7f71fe;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(255, 255, 215, 0.02));
border: 4px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 375px;
height: 667px;
}
Сами ссылки:
a {
color: var(--color);
text-decoration: none;
cursor: pointer;
}
Этот код не обязателен, если страница будет содержать собственные стили и цвета.
Теперь то, без чего не обойтись:
.links-bottom {
font-size: 14px;
position: absolute;
bottom: 15px;
left: 0;
right: 0;
text-align: center;
transition: all 0.6s;
transform: translateY(50px);
z-index: 2;
}
.links-bottom a {
opacity: 0.5;
}
.links-bottom a:hover {
opacity: 1;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
overflow: hidden;
transition: all 1.2s;
opacity: 0;
pointer-events: none;
}
.form {
width: 100%;
padding: 0 30px;
box-sizing: border-box;
}
.form_title {
width: 100%;
font-size: 26px;
margin: 0 0 20px;
}
.form_group {
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
padding-bottom: 18px;
}
.form_link {
text-align: center;
}
.form_link a {
opacity: 0.8;
}
.form_link a:hover {
opacity: 1;
}
.form_input {
appearance: none;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 3px;
box-sizing: border-box;
color: #fff;
display: block;
font-size: 18px;
font-weight: 300;
line-height: 44px;
outline: 0;
padding: 0 15px;
width: 100%;
transition: box-shadow .3s, border-color .3s;
}
.form_input:hover,
.form_input:focus {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.form_label {
display: block;
margin-bottom: 10px;
}
.form_btn {
appearance: none;
background-color: var(--color);
border: 0;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
line-height: 44px;
margin-top: 15px;
outline: 0;
padding: 0 15px;
text-align: center;
width: 100%;
}
/* Checkbox style */
.form_checkbox input {
display: none;
}
.form_checkbox input:checked + label:after {
background-color: var(--color);
}
.form_checkbox label {
position: relative;
padding-left: 25px;
}
.form_checkbox label:after {
content: "";
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
}
.form_checkbox label:before {
content: "";
border: solid 3px rgba(255, 255, 255, 0.09);
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
}
/* Svg */
.bg-svg {
position: absolute;
top: -700px;
left: -700px;
z-index: 1;
animation: rotation 120s infinite linear;
}
.bg-svg svg {
height: 2000px;
}
.bg-svg svg g circle {
animation: opacity 3s 3s infinite linear;
}
.bg-svg svg g:nth-child(2n) circle {
animation: opacity 7s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(359deg);
}
to {
transform: rotate(0deg);
}
}
@keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* Open form */
.container--login,
.layout.openLogin .container--login,
.layout.openRegister .container--register {
opacity: 1;
pointer-events: all;
}
.layout.openRegister .container--login,
.layout.openLogin .container--register {
opacity: 0;
pointer-events: none;
}
.layout.openRegister .links-bottom {
transform: translateY(0);
}
@media (max-width: 480px) {
body {
margin: 0;
}
.layout {
border: none;
border-radius: 0;
width: 100%;
}
}
На этом всё со стилизацией. Осталось добавить небольшой скрипт для переключения между формами:
var element = document.getElementById("app");
function openLogin() {
element.classList.remove("openRegister");
element.classList.add("openLogin");
}
function openRegister() {
element.classList.remove("openLogin");
element.classList.add("openRegister");
}
Если вам нужна только одна из форм, то скрипт само собой не нужен.
Пользуйтесь на здоровье.