CSS

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

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

التاريخ

30 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

12918

المواضيع

24
الشروحات chevron_left CSS Buttons chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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
.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
.btn-success
{
  background-color:#198754;
}

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

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

CSS button sizes
.btn-md
{
  font-size: 18px;
}

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

إضافة خاصية border-radius للكلاس الرئيسي btn لتكون جميع الأزرار بحواف دائرية في لغة CSS.
CSS rounded buttons
.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
.border-success
{
  border:solid 1px #198754;
}

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

إضافة لكل كلاس hover عن طريق hover: في لغة CSS لكل كلاس من كلاسات الألوان ويكون hover بنفس لون الخلفية لكي يتغير لون خلفية الزر مع تمرير مؤشر mouse.
CSS hoverable buttons
.border-success:hover
{
  color:white;
  background-color:#198754;
}

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

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

CSS Shadow Buttons
.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
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

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

CSS button width
.w-50
{
  width:50%;
}

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

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

CSS button groups
.group
{
  float:left;
}

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

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

CSS vertical button group
.btn-vertical
{
  display:block;
  width:140px;
}

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

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

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

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

معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات