تأثير تمرير الماوس على الزر
جزء من قسم إتقان CSS في رحلة 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
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة9التحديات النهائية
تمييز القائمة النشطةصفوف الجدول المخططةتأثير تمرير الماوس على الزرتخطيط البطاقات بنظام Gridصورة Hero مموهةتدرّب بنفسك: Playground لـ Web