אפקט ריחוף בכפתור
חלק מהיחידה שליטה ב-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
3פסאודו־מחלקות מבניות
פסאודו־מחלקות מבניותבחירת הילד הראשוןבחירת הילד האחרוןכוחם של דפוסים: שימוש ב־nth-childאתגר סיכום9אתגרים מסכמים
הדגשת התפריט הפעילשורות מתחלפות בטבלהאפקט ריחוף בכפתורפריסת כרטיסים ברשתתמונת פתיחה מטושטשתתרגלו בעצמכם: Web אונליין