*{ margin:0; padding:0; text-decoration: none; font-family: montserrat; } body{ / * اضبط الحد الأدنى لارتفاع الفقرة: * / min-height: 100vh; / * التدرج الخطي: إنشاء تأثير التدرج * / background-image: linear-gradient(120deg,#3498db,#8e44ad); } .login-form{ width:360px; background-color: #f1f1f1; height: 580px; / * المساحة المتروكة: الهوامش الداخلية العلوية والسفلية 80 بكسل ، والهوامش الداخلية اليمنى واليسرى 40 بكسل * / padding: 80px 40px; / * نصف قطر الحدود: معالجة الشكل * / border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .login-form h1{ text-align: center; margin-bottom: 60px ; } .txtb{ border-bottom: 2px solid #adadad; position:relative; margin: 30px 0; } .txtb input{ font-size: 15px; color:#333; border: none; width: 100%; outline: none; background: none; padding: 0 5px; height: 40px; } / * .txtb span :: before: يتوافق مع العنصر قبل الامتداد هنا يعني اسم المستخدم وكلمة المرور */ .txtb span::before{ content: attr(data-placeholder); position: absolute; top: 50%; left: 5px; color:#ADADAD; transform: translateY(-50%); z-index: -1; transition: .5s; } / * .txtb span :: after: يتوافق مع العنصر بعد الامتداد هنا يعني الخط الأفقي الموجود أسفل اسم المستخدم وكلمة المرور ، وليس الخط الأفقي لمربع الإدخال */ .txtb span::after{ content: ""; position: absolute; width: 0%; height: 2px; background:linear-gradient(120deg,#3498db,#8e44ad); transition: .5s; } / * اضبط تأثير التركيز على العنصر قبل الامتداد اقامة */ .focus + span::before{ top: -5px; } / * اضبط تأثير التركيز على العنصر قبل الامتداد اضبط الخط الأفقي لتغيير اللون */ .focus + span::after{ width:100%; } .logbtn{ width: 100%; height: 50px; border: none; background: linear-gradient(120deg,#3498db,#8e44ad,#3498db); background-size: 200%; color: #fff; / * المؤشر: المؤشر: اضبط نمط الماوس * / cursor:pointer; transition: .5s; } / * اضبط لون الخلفية لزر تسجيل الدخول للانتقال إلى اليمين تحقيق تأثير التدرج */ .logbtn:hover{ background-position:right ; } .bottom-text{ margin-top:60px; text-align: center; font-size: 13px; }