زر
جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 53 من 76.
التحدي
سهلفي هذا الدرس، سنقوم بتنسيق زر الإرسال لجعله جذاباً بصرياً. ستقوم بتطبيق لون خلفية، وتعديل لون النص والحشوة (padding)، وتدوير الزوايا، وإضافة ظل (box-shadow) للنموذج لجعله بارزاً.
قم بتنسيق عنصر <button>. اتبع الخطوات التالية:
- اضبط العرض width على "100%" بحيث يملأ المساحة بالكامل.
- قم بتطبيق لون خلفية background-color من اختيارك.
- قم بتغيير لون النص واجعل الخط بارزاً.
- أضف حشوة padding لتحسين التباعد.
- قم بتدوير الزوايا.
- قم بتطبيق خاصية box-shadow على الزر لجعله بارزاً عن الخلفية.
جرّب بنفسك
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعةتدرّب بنفسك: Playground لـ Web