אפקטים חזותיים הם כלי רב עוצמה שיכולים לשדרג את עיצוב האתר ולשפר את חווית המשתמש.
אפקט מעבר צבע בכפתורים הוא דרך פשוטה אך יעילה להוסיף עניין ודינמיות לאתרים.
במדריך זה, נלמד כיצד ליצור אפקט זה באמצעות אלמנטור וקצת קוד.
צעדים ליצירת האפקט
- הוסיפו כפתור חדש באלמנטור ועצבו את הכפתור איך שתרצו, כולל טקסט, צבע וגודל.
- הוסיפו את קוד ה-CSS תחת מתקדם > CSS מותאם.
במידה והטקסט בכפתור בעברית:
CSS
selector .elementor-button{
position: relative;
overflow: hidden;
z-index: 1;
}
selector .elementor-button:before { content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0%;
height: 100%;
background-color:#000;
transition: all 0.5s;
z-index: -1;
}
selector .elementor-button:hover:before {
width: 100%;
}
במידה והטקסט בכפתור באנגלית:
CSS
selector .elementor-button{
position: relative;
overflow: hidden;
z-index: 1;
}
selector .elementor-button:before { content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color:#000;
transition: all 0.5s;
z-index: -1;
}
selector .elementor-button:hover:before {
width: 100%;
}
הערות:
- כדי שצבע הטקסט ישנה צבע, פשוט הגדירו צבע שונה תחת סגנון > מעבר.
- ניתן לשנות את צבע הרקע של הכפתור (
#F12561) בהתאם לצבעים של האתר. - ניתן להתאים את משך האנימציה (
0.5s) לפי הצורך. - ניתן להשתמש בקוד זה גם עבור אלמנטים אחרים מלבד כפתורים, פשוט צריך למצוא את הקלאס הנכון.
סיכום
יצירת אפקט מעבר צבע בכפתורים אלמנטור היא תהליך פשוט יחסית שיכול להוסיף עניין ודינמיות לאתר שלך. על ידי ביצוע השלבים, תוכלו ליצור כפתורים שחשדרגו את הניראות של האתר ושימשכו את תשומת לב של המשתמשים.
יש לכם רעיונות לאפקטים מעניינים נוספים? נתקלתם בבעיה? תכתבו לי בתגובות או בקבוצת ווטסאפ של הקהילה.
