אפקט hover לקישורים: שדרוג קטן עם אפקט גדול
אם אתם מחפשים דרך פשוטה לגרום לאתר שלכם להיראות מקצועי יותר – אפקט hover לקישורים הוא פתרון מעולה.
מדובר באפקט קטן שמופיע רק כשמעבירים את העכבר מעל הקישור – קו צבעוני דק שמוסיף תחושת תנועה, חיים ואלגנטיות לעיצוב.
צפו בסרטון שצירפתי כאן כדי לראות את האפקט בפעולה.
כך נראה האפקט:
איך מוסיפים את האפקט?
הנה קטע CSS קצר ופשוט שמספיק להוספה לאתר – והוא יעבוד על כל הקישורים הטקסטואליים (ולא על כפתורים):
a {
position: relative;
color: #2A9D8F;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
width: 0;
height: 2px;
left: 0;
bottom: -2px;
background-color: #2A9D8F;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
🟢 אפשר לשנות את הצבע והעובי של הקו לפי העיצוב הכללי של האתר.
❌ איך למנוע מאפקט hover לקישורים להשפיע על כפתורים?
אם יש לכם כפתורים באתר (למשל כאלה שנבנו באלמנטור), לא תמיד תרצו שהאפקט יופיע גם עליהם.
במקרה כזה פשוט מחליפים את הקוד בקוד הבא:
a:not(.elementor-button):not(.button):not(.btn) {
position: relative;
color: #2A9D8F;
text-decoration: none;
}
a:not(.elementor-button):not(.button):not(.btn)::after {
content: "";
position: absolute;
width: 0;
height: 2px;
left: 0;
bottom: -2px;
background-color: #2A9D8F;
transition: width 0.3s ease;
}
a:not(.elementor-button):not(.button):not(.btn):hover::after {
width: 100%;
}
כך האפקט יופיע רק על לינקים רגילים, בלי להשפיע על כפתורים.
לסיכום
אפקט hover לקישורים הוא דרך קלה ואלגנטית להחיות את עיצוב האתר.
בלי תוספים, בלי קוד מורכב – רק כמה שורות CSS שנותנות תחושת השקעה, דינמיות ואסתטיקה.
🎥 צפו בסרטון ההדגמה המצורף והעתיקו את הקוד – תוך שתי דקות גם האתר שלכם ייראה מדויק יותר.
