אפקט ריחוף

שיעור 7 מתוך 8 בקורס פרויקט CSS - כפתור מעוצב של Coddy.

בואו נוסיף אפקט כלשהו כשהעכבר מרחף מעל הכפתור!

כדי לשנות את הכפתור כשהעכבר מרחף מעליו, נשתמש במחלקת הפסאודו :hover,

.fancyButton:hover {
	background-color: red;
}

בדוגמה שלמעלה הכפתור שלנו יהפוך לאדום ברגע שהעכבר ירחף מעליו!

כדי ליצור מעבר חלק, השתמשו ב:

.fancyButton {
	...
	transition: all 0.2s;
}

אפשר לשחק עם משך המעבר (0.2s).

אתגר

קל

הוסף אפקט ריחוף לכפתור שלך, ועצב אותו יפה!

משימות נדרשות:

מאפיינים שאפשר לשנות בריחוף (מומלץ אך לא חובה):

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
    </body>
</html>

כל השיעורים ביחידה פרויקט CSS - כפתור מעוצב

1מבוא

2פרויקט CSS

אפקט ריחוף שיעור פרויקט

תרגלו בעצמכם: Web אונליין