الزر هو عنصر قابل للنقر يستخدم لتنفيذ إجراء معين. باستخدام CSS ، يمكنك تعيين أنماط مختلفة من الأزرار ، أحدها تغيير لون الزر عند النقر عليه. يمكن ضبط لون الزر باستخدام CSS ' :نشيط 'فئة زائفة.
ستعلمك هذه المدونة الإجراء المتعلق بتغيير لون الزر عند النقر. لهذا ، أولاً ، تعرف على: الطبقة الزائفة النشطة.
لذا ، فلنبدأ!
ما هو ': active' في CSS؟
يمكن تغيير لون الزر عند النقر في CSS بمساعدة ' :نشيط 'فئة زائفة. في HTML ، يشير إلى عنصر يتم تنشيطه عندما ينقر المستخدم عليه. علاوة على ذلك ، عند استخدام الماوس ، يبدأ التنشيط عند الضغط على مفتاح الماوس.
بناء الجملة
أ : نشيط {
اللون : لون أخضر ؛
}
' أ 'يشير إلى عنصر HTML الذي سيتم تطبيق الفئة النشطة عليه.
دعونا نتجه نحو مثال لفهم المفهوم المذكور.
كيفية تغيير لون الزر عند النقر في CSS؟
لتغيير لون الزر عند النقر ، أولاً ، قم بإنشاء زر في ملف HTML وقم بتعيين اسم الفئة ' BTN '.
لغة البرمجة
< هيئة >< زر صف دراسي = 'btn' > زر < / زر >
< / هيئة >
بعد ذلك ، في CSS ، اضبط لون الزر. للقيام بذلك ، سوف نستخدم ' .btn 'للوصول إلى الزر وتعيين لون الزر على أنه' RGB (0 ، 255 ، 213) '.
CSS
.btn {لون الخلفية : RGB ( 0 و 255 و 213 ) ؛
}
بعد ذلك ، قم بتطبيق: فئة زائفة نشطة على الزر باسم ' .btn: نشط 'وتعيين لون الزر الذي سيظهر في حالته النشطة كـ' RGB (123 ، 180 ، 17) ':
.btn : نشيط {لون الخلفية : RGB ( 123 و 180 و 17 ) ؛
}
سيظهر هذا النتيجة التالية:
الآن ، دعنا نضيف العنوان بعلامة
واسم فئة الزر ' زر '، داخل علامة .
لغة البرمجة
< المركز >
< h1 > تغيير لون الزر < / h1 >
< زر صف دراسي = 'زر' > انقر فوق لي < / زر >
< / المركز >
بعد ذلك ، سننتقل إلى CSS ونصمم الزر ونطبق: نشط عليه. للقيام بذلك ، سنقوم بتعيين نمط الحدود على أنه ' لا أحد 'وإعطاء المساحة المتروكة كـ' 15 بكسل '. بعد ذلك ، اضبط لون نص الزر على أنه ' RGB (50 ، 0 ، 54) 'وخلفيته كـ' RGB (177 ، 110 ، 149) '، ونصف قطرها كـ' 15 بكسل ':
.زر {
الحدود : لا أحد ؛
حشوة : 15 بكسل ؛
اللون : RGB ( خمسون و 0 و 54 ) ؛
لون الخلفية : RGB ( 177 و 110 و 149 ) ؛
نصف قطر الحد : 15 بكسل ؛
}
سيظهر هذا النتيجة التالية:
بعد ذلك ، سنطبق: فئة زائفة نشطة على الزر باسم ' .button: نشط 'وتعيين لون الزر على أنه' RGB (200 ، 255 ، 0) ':
.زر : نشيط {
لون الخلفية : RGB ( 200 و 255 و 0 ) ؛
}
بمجرد تنفيذ جميع التعليمات البرمجية أعلاه ، انتقل إلى ملف HTML وقم بتنفيذه للتحقق من النتيجة:
من الإخراج ، يمكن ملاحظته عند النقر فوق الزر ، يتغير لونه وفقًا لكود لون RGB المحدد.
استنتاج
لتغيير لون الزر عند النقر في CSS ، فإن الخيار ' :نشيط يمكن استخدام فئة زائفة. وبشكل أكثر تحديدًا ، يمكن أن يمثل عنصر الزر عند تنشيطه. باستخدام هذه الفئة ، يمكنك تعيين ألوان مختلفة للأزرار عندما ينقر الماوس عليها. توضح هذه المقالة إجراء تغيير لون الزر عند النقر في CSS.
لغة البرمجة
< المركز >< h1 > تغيير لون الزر < / h1 >
< زر صف دراسي = 'زر' > انقر فوق لي < / زر >
< / المركز >
بعد ذلك ، سننتقل إلى CSS ونصمم الزر ونطبق: نشط عليه. للقيام بذلك ، سنقوم بتعيين نمط الحدود على أنه ' لا أحد 'وإعطاء المساحة المتروكة كـ' 15 بكسل '. بعد ذلك ، اضبط لون نص الزر على أنه ' RGB (50 ، 0 ، 54) 'وخلفيته كـ' RGB (177 ، 110 ، 149) '، ونصف قطرها كـ' 15 بكسل ':
.زر {الحدود : لا أحد ؛
حشوة : 15 بكسل ؛
اللون : RGB ( خمسون و 0 و 54 ) ؛
لون الخلفية : RGB ( 177 و 110 و 149 ) ؛
نصف قطر الحد : 15 بكسل ؛
}
سيظهر هذا النتيجة التالية:
بعد ذلك ، سنطبق: فئة زائفة نشطة على الزر باسم ' .button: نشط 'وتعيين لون الزر على أنه' RGB (200 ، 255 ، 0) ':
.زر : نشيط {لون الخلفية : RGB ( 200 و 255 و 0 ) ؛
}
بمجرد تنفيذ جميع التعليمات البرمجية أعلاه ، انتقل إلى ملف HTML وقم بتنفيذه للتحقق من النتيجة:
من الإخراج ، يمكن ملاحظته عند النقر فوق الزر ، يتغير لونه وفقًا لكود لون RGB المحدد.
استنتاج
لتغيير لون الزر عند النقر في CSS ، فإن الخيار ' :نشيط يمكن استخدام فئة زائفة. وبشكل أكثر تحديدًا ، يمكن أن يمثل عنصر الزر عند تنشيطه. باستخدام هذه الفئة ، يمكنك تعيين ألوان مختلفة للأزرار عندما ينقر الماوس عليها. توضح هذه المقالة إجراء تغيير لون الزر عند النقر في CSS.