انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 120
دورة لغة CSS

الأزرار في لغة CSSCSS Buttons

سوف تتعلم في هذا الدرس طريقة صنع أزرار بلغة CSS حديثة وبأكثر من حجم وبأكثر من شكل وسوف تتعلم طريقه عمل تأثير مع تمرير زر mouse.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
13
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
19,517
محتوى الدرس
في هذا الدرس 13تصفّح المواضيع

CSS Buttons الأزرار في لغة CSS

يمكن عمل أزرار في لغة CSS مع عنصر <button> أو عنصر <a> ويمكن يطبق نفس التأثير علي أي عنصر أخر, يمكن عمل أزرار ديناميكية عن طريق تجهيز كلاس مسبق يمكن إعادة استخدامه أكثر من مرة مع أكثر من عنصر.


تجهيز كلاس btn:

  • border: none
  •   padding: 15px 30px
  •   text-align: center
  •   text-decoration: none
  •   display: inline-block
  •   font-size: 16px
  •   cursor: pointer
  •   margin:5px
  •   border: gray 1px solid
جرّب بنفسك

CSS Buttons

HTML 
.btn
{
  border: none;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin:5px;
  border:gray 1px solid;
}
جرّب بنفسك

CSS button bolors ألوان الأزرار في لغة CSS

تجهيز مجموعة كلاسات لكل زرار فمثلاً الزر الأخضر يرمز علي نجاح العملية btn-success وزر أحمر يدل علي خطورة العملي btn-danger وهكذا كل كلاس يأخذ خلفية مختلفة.

جرّب بنفسك

CSS Button Colors

HTML 
.btn-success
{
  background-color:#198754;
}
جرّب بنفسك

CSS button sizes أحجام الأزرار في لغة CSS

تجهيز مجموعة كلاسات علي حسب الأحجام كل كلاس يكون له حجم خط مختلف فمثلا btn-sm يدل علي زرار صغير وحجم الخط 12px يمكن تكرار العملية علي حسب احتياج التصميم.

جرّب بنفسك

CSS button sizes

HTML 
.btn-md
{
  font-size: 18px;
}
جرّب بنفسك

CSS rounded buttons أزرار دائرية في لغة CSS

إضافة خاصية border-radius للكلاس الرئيسي btn لتكون جميع الأزرار بحواف دائرية في لغة CSS.
جرّب بنفسك

CSS rounded buttons

HTML 
.btn
{
  border: none;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin:5px;
  border-radius:5px;
}
جرّب بنفسك

CSS colored button borders أزرار بإطارات ألوان في لغة CSS

تجهيز كلاسات للإطارات بنفس طريقة background-color علي سبيل المثال border-primary ويكون له نفس لون الخلفية وتغيير لون الأزرار من أبيض إلي اللون الأسود.

جرّب بنفسك

CSS colored button borders

HTML 
.border-success
{
  border:solid 1px #198754;
}
جرّب بنفسك

CSS hoverable buttons أزرار تتأثر بتمرير مؤشر mouse في لغة CSS

إضافة لكل كلاس hover عن طريق hover: في لغة CSS لكل كلاس من كلاسات الألوان ويكون hover بنفس لون الخلفية لكي يتغير لون خلفية الزر مع تمرير مؤشر mouse.
جرّب بنفسك

CSS hoverable buttons

HTML 
.border-success:hover
{
  color:white;
  background-color:#198754;
}
جرّب بنفسك

CSS Shadow Buttons عمل ظل للازار في لغة CSS

عمل كلاسات لتغير box-shadow ظل الصندوق للأزرار في لغة CSS عن طريق خاصية box-shadow.

جرّب بنفسك

CSS Shadow Buttons

HTML 
.shadow-out
{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
جرّب بنفسك

CSS disabled buttons أزرار غير قابلة للنقر في لغة CSS

استخدم cursor: not-allowed لعمل كلاس عند إضافته علي أي زر يكون غير فعال أو معطل في لغة CSS.

جرّب بنفسك

CSS disabled buttons

HTML 
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
جرّب بنفسك

CSS button width عرض الزر في لغة CSS

يمكن تكبير حجم الزر عن طريق عمل كلاس يتحكم في عرض الزر سواء بوحدة بيكسل أو بالنسبة المئوية في لغة CSS عن طريق خاصية width.

جرّب بنفسك

CSS button width

HTML 
.w-50
{
  width:50%;
}
جرّب بنفسك

CSS button groups عمل أزرار في مجموعه واحده في لغة CSS

لعمل مجموعة أزرار مرتبطة ببعض يجب إزالة margin + border-radius + تحويل العنصر إلي inline-block عن طريق خاصية float-left في لغة CSS.

جرّب بنفسك

CSS button groups

HTML 
.group
{
  float:left;
}
جرّب بنفسك

CSS vertical button group أزرار عمودية في لغة CSS

عمل مجموعة أزرار عمودية عن طريق كلاس تحويل العنصر إلي display:block و تحديد عرض ثابت له في لغة CSS.

جرّب بنفسك

CSS vertical button group

HTML 
.btn-vertical
{
  display:block;
  width:140px;
}
جرّب بنفسك

CSS button on image زر أعلي الصورة في لغة CSS

يمكن وضع الزر أعلي الصورة عن طريق خاصية position في لغة CSS يتم إضافة position للعنصر والعنصر الأب.

جرّب بنفسك

CSS animated buttons زر بمؤثر حركي في لغة CSS

تحريك المحتوي الداخلي وإظهار بعض المعلومات عندما يتم تمرير مؤشر mouse أعلي الزر عن طريق hover في لغة CSS.

جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات20

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 20 مفهومةأول بطاقة، أول خطوة
01 Buttons أزرار
للمراجعة
02 Colors ألوان
للمراجعة
03 Background خلفية
للمراجعة
04 Sizes أحجام
للمراجعة
05 Font-Size حجم الخط
للمراجعة
06 Rounded مدور / دائري
للمراجعة
07 Radius منتصف القطر / الكوع الجانبي
للمراجعة
08 Border حد
للمراجعة
09 Borders حدود
للمراجعة
10 Hoverable قابل للتحويم
للمراجعة
11 Shadow ظل
للمراجعة
12 Disabled معطل / غير نشط
للمراجعة
13 Width عرض
للمراجعة
14 Groups مجموعات
للمراجعة
15 Margins هوامش
للمراجعة
16 Left يسار
للمراجعة
17 FloaT عائم
للمراجعة
18 Vertical عامودي
للمراجعة
19 Image صورة
للمراجعة
20 Animated رسم متحرك
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

5أسئلة 3أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي5 أسئلة تنتظرك
01

نستطيع تغيير لون الازرار عن طريق خاصية background-color ؟

02

نستطيع تغيير حجم الازرار عن طريق خاصية ؟

03

ماهي الخاصية التي تستخدم في عمل انحناءات لزوايا الازرار ؟

____
04

نستطيع تغيير حجم المساحات الفارغة بداخل الازرار عن طريق استخدام الخاصية ؟

05

هل نستطيع اضافة ازرار فوق صورة معينة ؟