במדריך הזה נראה איך ליצור כפתור עם מעבר צבע באלמנטור עם הובר יפה, כמו כן נראה איך לעשות זאת בכפתורי השליחה של הטפסים באלמנטור.
עדכון: כיום ניתן לעשות מעבר צבע באלמנטור לבד (בכפתורים רגילים), ועדיין האפשרות של הובר (מעבר עכבר) באלמנטור לא מספיק טובה.
מעברי צבע בכפתור רגיל
אז הנה הקוד הבסיסי ליצירת מעבר צבע בכפתורים של אלמנטור (כאמור ניתן לעשות זאת באלמנטור עצמו ללא הקוד).
selector .elementor-button {background-image: linear-gradient(to right, #EDE574 0%, #E1F5C4 100%)}
והנה התוצאה,
אפשר כמובן לשנות את הצבעים והכיוון, כמו כן, אפשר להוסיף יותר משני צבעים.
הנה דוגמא לכפתור עם שלושה צבעים.
selector .elementor-button {background-image: linear-gradient(to right, #D16BA5 0%, #86A8E7 50%, #5FFBF1 100%)}
והנה התוצאה,
אפשר כמובן לשנות את הצבעים והכיוון (כמו גם להוסיף יותר משני צבעים)
במידה ותרצו שיהיה גם אפקט הובר יפה לכפתור, הנה הקוד,
selector .elementor-button {background-image: linear-gradient(to right, #EDE574 0%, #E1F5C4 51%, #EDE574 100%)}
selector .elementor-button {
transition: 0.5s;
background-size: 200% auto;
}
selector .elementor-button:hover {
background-position: right center;
}
מעברי צבע בכפתור שליחה בטפסים
על מנת להוסיף מעבר צבע לכפתורי השליחה בטפסים ניתן להשתמש בקודים הנ”ל,
במידה ורוצים להחיל רק על הכפתור שליחה ולא על הכפתור “הקודם”, יש לשנות לסלקטור הזה,
selector .elementor-button[type="submit"]
וכך זה נראה,
6 תגובות
איפה הקוד השני-
(ההובר..)
נעלם הקוד של ההובר
השתמשתי עכשיו גם עם הקוד של הרגיל וההובר עובד מצויין:)
תודה רבה
היי רוני, תודה על הטיפים!
אם אני רוצה להשתמש באפקט הזה לכפתור שליחה של טופס, מה אני משנה בקוד?
איזה selector? וגם אם אני רוצה להשתמש באפקט לכותרת ולא לכפתור, איך לשנות?
מאוד אשמח לתגובה….!
תודה רבה!
הוספתי הסבר על כפתורים בטפסים, לגבי צבעי מעבר בתוך טקסט, תראי כאן, https://easypress.co.il/elementor/gradient-text/
מדהים! עזרת לי מאוד!!!
תודה רבה!