پیشنمایش زنده
اسنیپت
فرم ورود مینیمال با خط پایین
فرم
ورود
مینیمال
۶۰
۴.۱ (۹)
<div class="radikalwp-glass-login"><h4>خوش آمدید<//h4><input type="email" placeholder="ایمیل شما"><input type="password" placeholder="رمز عبور"><button type="button">ورود به حساب<//button><span>حساب ندارید؟ <a href="#">ثبتنام کنید<//a><//span><//div>
.radikalwp-glass-login {
width: 300px;
padding: 28px 24px;
text-align: center;
background: linear-gradient(160deg, rgba(49, 46, 129, .92), rgba(112, 26, 117, .85));
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 20px;
box-shadow: 0 20px 44px rgba(30, 27, 75, .35);
}
.radikalwp-glass-login h4 { margin: 0 0 18px; font-size: 17px; color: #fff; }
.radikalwp-glass-login input {
width: 100%;
margin-bottom: 12px;
padding: 11px 14px;
font-family: inherit;
font-size: 13px;
color: #fff;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 11px;
outline: none;
box-sizing: border-box;
transition: border-color .25s ease, background .25s ease;
}
.radikalwp-glass-login input::placeholder { color: rgba(255, 255, 255, .55); }
.radikalwp-glass-login input:focus {
border-color: #c4b5fd;
background: rgba(255, 255, 255, .16);
}
.radikalwp-glass-login button {
width: 100%;
margin-top: 4px;
padding: 12px 0;
font-family: inherit;
font-size: 14px;
font-weight: 800;
color: #4c1d95;
background: #ede9fe;
border: none;
border-radius: 11px;
cursor: pointer;
transition: filter .2s ease, transform .2s ease;
}
.radikalwp-glass-login button:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.radikalwp-glass-login > span { display: block; margin-top: 14px; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.radikalwp-glass-login a { color: #fbcfe8; text-decoration: none; font-weight: 700; }
کارت ورود با ظاهر شیشهای روی گرادیان شب بنفش، دو فیلد ایمیل و رمز، دکمه ورود و لینک ثبتنام. بلور پسزمینه و حاشیه نیمهشفاف، عمق گلسمورفیسمی خوشدستی میسازد. برای صفحات ورود و عضویت قالبهای مدرن و لندینگ اپلیکیشنها مناسب است. فیلدها در فوکوس حاشیه بنفش روشن میگیرند تا مسیر تایپ کاربر مشخص بماند.
کارت را داخل یک بخش با تصویر یا گرادیان تیره بگذارید. شفافیت و رنگ نیمهشفاف کارت خودش با زمینه ترکیب میشود و حس شیشه میدهد.
خیر؛ فرم فقط ظاهری است. باید اکشن ورود سایت خود را به فیلدها متصل کنید؛ استایل آماده استفاده است.
دکمه رنگ روشن بنفش دارد. پسزمینه و رنگ متن آن را با کد برند خود جایگزین کنید تا با تم سایت بخواند.
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!