مربع اختيار التصميم بمظهر يشبه الزر وتأثير التحويم

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

ولتحقيق ذلك، أضف قاعدة CSS التالية إلى ورقة الأنماط الخاصة بك:

#ck-button:hover {
    background: red;
}

تطبق هذه القاعدة لون خلفية أحمر على حاوية "#ck-button" عندما يقوم المستخدم بالتمرير فوقها. من خلال التمرير فوق مربع الاختيار الذي يشبه الزر، يمكن للمستخدمين الآن التعرف بسهولة على المنطقة القابلة للنقر والتفاعل مع العنصر بشكل أكثر فعالية.

الكمان المحدث: http://jsfiddle.net/zAFND/4/

باستخدام هذا التعديل، لم تقم بتخصيص مظهر مربع الاختيار فحسب، بل قدمت أيضًا تجربة مستخدم محسنة عن طريق إضافة تأثير التمرير، مما يضمن التفاعل السلس.