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

جربها بنفسك

معلومات تهمك

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

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

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات chevron_left CSS Buttons chevron_left CSS