تأثير تمرير الماوس على الزر
جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 41 من 43.
التحدي
سهليوجد زر بالفعل في HTML. هدفك هو جعله يتوسع قليلاً عندما يمرر المستخدم الماوس فوقه. في CSS، قم بتنسيق .cta-button بحيث:
- يكون له انتقال سلس
transition: transform 0.3s ease;. - عند التمرير، يزداد حجمه قليلاً باستخدام
transform: scale(1.05).
جرّب بنفسك
<html>
<head>
<title>Button Hover Effect</title>
<style>
/* Add your styles here */
.cta-button {
background-color: #6a1b9a;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
</style>
</head>
<body>
<button class="cta-button">Click Me</button>
</body>
</html>
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة9التحديات النهائية
تمييز القائمة النشطةصفوف الجدول المخططةتأثير تمرير الماوس على الزرتخطيط البطاقات بنظام Gridصورة Hero مموهة