יצירת כפתור עם אנימציית קו עליון/תחתון/שניהם בעת מעבר עכבר, באלמנטור

זהו פוסט ראשון בסדרת פוסטים שבהם נלמד ליצור באלמנטור + CSS מותאם מגוון של אנימציות מעבר עכבר לכפתורים, וכן עיצוב מקורי לכפתורים, והכל דרך כפתור של אלמנטור, ולא כפתור שאותו תוסיפי באמצעות ווידג'ט HTML בלי להבין איך זה עובד…

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

See the Pen
כפתורים עם קו תחתי/עליון/שניהם by hanniessite (@hanniessite)
on CodePen.

המדריך יעבור איתך צעד צעד איך לבנות את האנימציה ולהתאים את הנראות ב100% לשביעות רצונך. מבחינת צבעוניות, עובי הקו, משך האנימציה, כמה הקו יזוז ומאיזה כיוון, וכמובן – האם יהיה קו אחד (מעל או מתחת) או שני קווים.

הגדרות לכפתור עצמו – בממשק אלמנטור

נתחיל מלהגדיר את הכפתור עצמו. הוא אמור לקבל את ההגדרות הבאות:

- ללא רקע

- ללא מסגרת (עובי המסגרת הוא 0 מכל הכיוונים)

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

- השוליים הפנימיים למעלה ולמטה מגדירים את המיקום של הקו. ככל שאת רוצה את הקו קרוב יותר לטקסט – תני שוליים פנימיים למעלה/למטה קטנים יותר. ולהיפך.

הוספת הקווים

אם את רוצה קו עליון – נשתמש בהגדרת CSS שנקראת before.

אם את רוצה קו תחתי – נשתמש בהגדרת CSS שנקראת after.

אם את רוצה גם וגם – נשתמש בשניהם.

והנה הגדרות הCSS הנדרשות. יש להוסיף אותן בCSS מותאם של הווידג'ט.

שימי ❤️, במידה ואת צריכה את ההגדרות עבור כפתור שנמצא בתוך לופ/ליסטינג גריד – יש תוספת קצרה בהמשך.

selector .elementor-button{ 
  position: relative;
}
selector .elementor-button:before,
selector .elementor-button:after{
  content: '';
  position: absolute;
  width: 100%;
  height: var(--lines-height, 5px);
  transition: all var(--animation-duration, 0.4s);
  border-radius: var(--border-radius, 0);
  left: 0;
}
selector .elementor-button:before{
  background: var(--up-color);
  top: 0;
  transform-origin: var(--up-start);
}
selector .elementor-button:after{
  background: var(--down-color);
  bottom: 0;
  transform-origin: var(--down-start);
}
selector .elementor-button:hover:before,
selector .elementor-button:hover:after{
  opacity: 1;
  translate: none;
}

התחלת קסטומיזציה לקווים

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

מה הם משתנים?

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

במקרה שלנו – תוכלי לראות בקוד הCSS הרבה פעמים את המילה var ואחריה סוגריים. כל המקומות הללו – משתמשים באותן קופסאות של משתמשים. על כל קופסה יש שם, שמתחיל בשני מקפים (–). השתמשתי כאן במשתנים כדי לאפשר לך לשנות את הגדרות הקווים בצורה נוחה, בלי להתערב בקוד הCSS יותר מידי.

בשלב הזה בואי ונראה איך לשלוט על הצבע של הקווים. שימי ❤️ לעדכן רק את הצבע של הקו שאותו את רוצה. השמות של הגדרות הקו העליון מתחילות במילה up, והשמות של הגדרות הקו התחתון מתחילות במילה down. כמובן אחרי שי המקפים.

המשתנים שאחראיים על צבעי הקווים נקראים:

--up-color, --down-color

את הגדרת המשתנים נכתוב בחלק העליון של הCSS שהכנסנו, מיד אחרי המילים:

position: relative;

נוסיף שם אנטר (אחרי הנקודה פסיק), ונכתוב את שם המשתנה הרצוי לנו, נכתוב נקודותיים (:), ואז את שם או מספר הצבע, ולבסוף נחתום בנקודה פסיק.

במידה ואת מעוניינת בשני הקווים – עליך לתת הגדרת צבע לשני המשתנים. לדוגמה אם אני רוצה קווים אדומים החלק הראשון של הCSS שלי ייראה כך:

המצב המקורי:

selector .elementor-button{
  position: relative;
}

המצב החדש:

selector .elementor-button{ 
  position: relative;
  --up-color: red;
  --down-color: red;
}

לאחר הוספת הקוד הזה תוכלי לראות את הקווים בצבע אדום:

עיגול פינות

כדי להגדיר שהקווים יהיו עם פינות עגולות – נוסיף את המשתנה שנקרא, ואחרי הנקודותיים נגדיר את מספר הפיקסלים לעיגול הפינות.

--border-radius

לדוגמה:

--border-radius: 5px;

והנה התוצאה. אפשר לראות שהפינות של הקווים הפכו קצת יותר מעוגלות ונעימות בעין מאשר קודם.

גובה הקווים:

כברירת מחדל, גובה הקווים הוא 5 פיקסלים, אבל אם את מעוניינת בקווים עבים או דקים יותר – תוכלי להשתמש במשתנה שנקרא:

--lines-height

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

--lines-height: 3px;

כרגע הקוד שלי נראה כך:

selector .elementor-button{ 
  position: relative;
  --up-color: red;
  --down-color: red;
  --border-radius: 5px;
  --lines-height: 3px;
}

שימי ❤️ לא לשכוח לכתוב נקודה פסיק (;) בסוף כל פקודה, ונקודתיים בין שם המשתנה לבין הערך שאת רוצה לשמור לתוכו.

הסתרת הקווים והוספת האנימציה אנימצית תזוזה למעלה/למטה

עליך להוסיף תחילה את הקוד הבא, אחרי כל הקוד שהוספת עד כה.

בשביל אנימציה לקו העליון כתבי את הקוד הבא

selector .elementor-button:before{
  opacity: 0;
  translate: 0 var(--up-start-point, -5px);
}

כמו שאת יכולה לראות, גם כאן יש משתנה חדש – up-start-point. המשתנה הזה מגדיר את נקודת המוצא של הקו. מאיפה הוא מתחיל את האנימציה בעת מעבר עכבר. קו שצריך לעלות כלפי מעלה – נקודת המוצא שלו היא יותר למטה, ואז ניתן מספר חיובי (לדוגמה 5px). לעומת זאת אם הקו צריך לרדת כלפי מטה – נקודת המוצא שלו היא עליונה יותר, ולכן נגדיר מספר שלילי. כברירת מחדל, הקו ירד 5 פיקסלים למטה, אבל באפשרותך לשנות את המרחק שעל הקו לזוז על ידי מתן ערך חדש למשתנה up-start-point (עם — לפני השם כמובן). את המשתנה הזה נגדיר בדיוק כמו המשתנים הקודמים, בחלק העליון של קוד הCSS שלנו:

כדי להגדיר אנימציה על הקו התחתון הוסיפי את הקוד הבא:

selector .elementor-button:after{
  opacity: 0;
  translate: 0 var(--down-start-point, 5px);
}

גם כאן כברירת מחדל הקו ייכנס 5 פיקסלים, הפעם מלמטה (זוכרת? מספר חיובי = כניסה מלמטה, מספר שלילי = כניסה מלמעלה). והתוצאה שקיבלתי היא:

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

selector .elementor-button{ 
  position: relative;
  --up-color: red;
  --down-color: red;
  --border-radius: 5px;
  --lines-height: 3px;
  --up-start-point: -10px;
  --down-start-point: 10px;
}
selector .elementor-button:before,
selector .elementor-button:after{
  content: '';
  position: absolute;
  width: 100%;
  height: var(--lines-height, 5px);
  transition: all var(--animation-duration, 0.4s);
  border-radius: var(--border-radius, 0);
  left: 0;
}
selector .elementor-button:before{
  background: var(--up-color);
  top: 0;
  transform-origin: var(--up-start);
}
selector .elementor-button:after{
  background: var(--down-color);
  bottom: 0;
  transform-origin: var(--down-start);
}
selector .elementor-button:hover:before,
selector .elementor-button:hover:after{
  opacity: 1;
  translate: none;
}

selector .elementor-button:before{
  opacity: 0;
  translate: 0 var(--up-start-point);
}
selector .elementor-button:after{
  opacity: 0;
  translate: 0 var(--down-start-point, 5px);
}

והנה עוד כמה דוגמאות. לכל אחת – התוצאה ומתחתיה המשתנים שהוגדרו כדי ליצור אותה:

selector .elementor-button{ 
  position: relative;
  --down-color: #542F61;
  --border-radius: 5px;
  --lines-height: 5px;
  --down-start-point: 5px;
}

selector .elementor-button{ 
  position: relative;
  --down-color: #542F61;
  --up-color: #3ABAEB;
  --border-radius: 5px;
  --lines-height: 5px;
  --down-start-point: -5px;
  --up-start-point: 5px;
}

selector .elementor-button{
  position: relative;
  --up-color: #3ABAEB;
  --border-radius: 5px;
  --lines-height: 8px;
  --up-start-point: 5px;
}

ומה לגבי כפתור שנמצא בפריט לולאה/ליסטינג גריד?

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

לכן מה שהייתי ממליצה לעשות במצב כזה:

תני לכפתור קלאס – בטאב "מתקדם" יש שדה שנקרא "CSS classes". הקלאס שתתני חייב להיות אותיות/מקף/קו תחתי בלבד, ללא רווחים. נניח החלטתי על הקלאס btn_with_lines.
את הCSS המותאם של הכפתורים תני על הווידג'ט של הלולאה עצמה. בין אם זו לולאה של אלמנטור או ווידג'ט של listing grid של ג'ט.
בכל מקום שכתוב selector – נצטרך להוסיף את הקלאס החדש. יש לתת רווח בין המילה סלקטור לשם של הקלאס, ובין השם של הקלס להמשך (elementor-button.), וכן יש לתת נקודה בצמוד לשם של הקלאס, לפניו.

לדוגמה:

selector .elementor-button

יהפוך להיות

selector .btn_with_lines .elementor-button

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

הצלחה רבה!