يمكن عمل أزرار في لغة 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.

مصطلحات الدرس

أزرار

ألوان

خلفية

Sizes

أحجام

Font-Size

حجم الخط

Rounded

مدور / دائري

Radius

منتصف القطر / الكوع الجانبي

حد

حدود

قابل للتحويم

ظل

معطل / غير نشط

Width

عرض

Groups

مجموعات

Margins

هوامش

Left

يسار

FloaT

عائم

Vertical

عامودي

Image

صورة

Animated

رسم متحرك

اختصارات الدرس

CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Buttons CSS