تأثير الـ Hover
الدرس 7 من 8 في دورة مشروع CSS - زر أنيق على Coddy.
لنقم بإنشاء بعض التأثيرات عند تمرير الماوس فوق الزر!
لتغيير الزر عند تمرير الماوس فوقه، نستخدم الفئة الزائفة :hover،
.fancyButton:hover {
background-color: red;
}في المثال أعلاه، سيتحول لون الزر إلى الأحمر بمجرد تمرير الماوس فوقه!
لجعل الانتقال سلساً، استخدم،
.fancyButton {
...
transition: all 0.2s;
}يمكنك تجربة تغيير وقت الانتقال (0.2s).
التحدي
سهلأضف تأثير التحويم (hover) إلى الزر الخاص بك، واجعله يبدو رائعاً!
المهام المطلوبة:
- أضف خاصية transition إلى الزر الخاص بك، بالتوقيت الذي تختاره، بحيث يكون أقل من أو يساوي ثانية واحدة.
- أضف
opacity: 0.8;إلى تأثير التحويم الخاص بالزر.
خصائص اختيارية ومقترحة لتغييرها عند التحويم:
- الظلال (
box-shadow) - لون الخلفية
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>