زر
جزء من قسم 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)تحدي المراجعة