الزر هو جزء أساسي من HTML يقوم بمهام مختلفة. باستخدام CSS ، يمكنك تصميم الزر وتصميمه. هناك طرق مختلفة لتصميم الزر ، مثل تلوين الزر وتغيير حجمه وتحويمه وغير ذلك الكثير.
في هذه المقالة ، سنتعلم أولاً كيفية إنشاء زر ، ثم تغيير لون الزر عند التمرير.
هيا بنا نبدأ!
كيفية تغيير لون الزر عند التمرير في CSS؟
في CSS ، ' :يحوم 'لتغيير لون الزر عند التمرير. ' :يحوم 'هي فئة زائفة تسمح بتغيير سلوك عناصر HTML عند تمرير الماوس فوقها ، مثل عناصر مثل الروابط والأزرار والصور وغير ذلك الكثير.
بناء جملة :يحوم يرد أدناه.
بناء الجملة
في الصيغة المقدمة أعلاه ، ' أ 'يشير إلى عنصر HTML حيث' :يحوم 'يتم تطبيقه. في CSS ، يمكنك تعيين سلوك التمرير لعناصر HTML ، مثل لون العنصر وحجمه وعرضه.
الخطوة 1: إنشاء Div و Button
في HTML ، سننشئ div أولاً ونضيف عنوانًا به
وزرًا باستخدام علامة. هنا ، سنقوم بتعيين اسم فئة الزر على أنه ' BTN ونص الزر كـ ' تحوم فوقي '.
لغة البرمجة
نتيجة الكود المذكور أعلاه مذكورة أدناه. يمكنك أن ترى أنه تم إنشاء العنوان والزر:
الآن ، انتقل إلى CSS لتصميم div والزر واحدًا تلو الآخر.
الخطوة 2: زر النمط و Div
أولاً ، سنصمم الحاوية التي تم إنشاؤها باستخدام ' شعبة '. بعد ذلك ، سنضبط ارتفاع div كـ ' 250 بكسل 'ولون الخلفية كـ' RGB (199 ، 173 ، 192) '. سنستخدم أيضًا خاصية border لضبط حدود عنصر div والعرض كـ ' 5 بكسل '، النمط كـ' صلب '، واللون كـ' RGB (40 ، 2 ، 55) '.
CSS
يشير الناتج أدناه إلى أنه تم تطبيق النمط المضاف بنجاح على div:
في الخطوة التالية ، سنقوم بتصميم الزر باستخدام CSS.
الآن ، سنصمم الزر باستخدام ' .btn 'للوصول إلى الزر الذي تم إنشاؤه بتنسيق HTML. بعد ذلك ، سنخفي حدود الزر بتعيين ' لا أحد 'كقيمة خاصية الحدود. بعد ذلك ، سنضبط حجم الخط على ' كبير 'والمساحة المتروكة على الزر لـ' 10 بكسل 'لإنشاء مسافات بين محتوى الزر وحدود الزر. في النهاية ، سنقوم بتعيين لون النص والخلفية كـ ' RGB (50 ، 0 ، 54) ' و ' RGB (193 ، 54 ، 135) ':
الزر مصمم الآن:
علاوة على ذلك ، سوف نطبق ' :يحوم 'لتغيير لون الزر عند التمرير.
الخطوة 3: تغيير لون الزر عند التمرير
الآن ، سوف نستخدم ' .btn: hover 'لربط الزر بعنصر فئة زائفة تحوم. نتيجة لذلك ، سيتم تطبيق التمرير على الزر. بعد ذلك ، سنقوم بتعيين لون الخلفية ولون نص الزر على أنه ' RGB (66 ، 2 ، 41) ' و ' RGB (119 ، 255 ، 0) '. سيتم تطبيق هذه الألوان على الزر عند تمرير الماوس فوقه:
في الإخراج الموضح أدناه ، يمكنك أن ترى أن لون الزر يتغير عند تحريك الماوس فوقه:
هذا هو! لقد أوضحنا طريقة تغيير لون الزر عند التمرير باستخدام CSS.
استنتاج
لتغيير لون الزر عند التمرير ، فإن الخيار ' :يحوم 'يتم استخدام عنصر من الدرجة الزائفة. للقيام بذلك ، قم بربط الزر بـ: قم بتمرير الماوس وقم بتعيين لون الزر ، والذي سيتغير عندما نقوم بالمرور فوقه. في هذه المقالة ، أوضحنا طريقة تغيير لون الزر عند التمرير وقدمنا مثالاً على ذلك.