יצירת אפקט מעבר צבע בכפתור אלמנטור

אפקטים חזותיים הם כלי רב עוצמה שיכולים לשדרג את עיצוב האתר ולשפר את חווית המשתמש.
אפקט מעבר צבע בכפתורים הוא דרך פשוטה אך יעילה להוסיף עניין ודינמיות לאתרים.

במדריך זה, נלמד כיצד ליצור אפקט זה באמצעות אלמנטור וקצת קוד.

צעדים ליצירת האפקט

  1. הוסיפו כפתור חדש באלמנטור ועצבו את הכפתור איך שתרצו, כולל טקסט, צבע וגודל.
  2. הוסיפו את קוד ה-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) לפי הצורך.
  • ניתן להשתמש בקוד זה גם עבור אלמנטים אחרים מלבד כפתורים, פשוט צריך למצוא את הקלאס הנכון.

סיכום

יצירת אפקט מעבר צבע בכפתורים אלמנטור היא תהליך פשוט יחסית שיכול להוסיף עניין ודינמיות לאתר שלך. על ידי ביצוע השלבים, תוכלו ליצור כפתורים שחשדרגו את הניראות של האתר ושימשכו את תשומת לב של המשתמשים.

יש לכם רעיונות לאפקטים מעניינים נוספים? נתקלתם בבעיה? תכתבו לי בתגובות או בקבוצת ווטסאפ של הקהילה.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
אלמנטור
אנימציות מיוחדות לטקסט עם GSAP
הוספת אנימציות מרהיבות לטקסט עם ספריית GSAP
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
חיפוש חופשי
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).