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

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

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

מעברי צבע בכפתור רגיל

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

				
					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 Responses

  1. היי רוני, תודה על הטיפים!
    אם אני רוצה להשתמש באפקט הזה לכפתור שליחה של טופס, מה אני משנה בקוד?
    איזה selector? וגם אם אני רוצה להשתמש באפקט לכותרת ולא לכפתור, איך לשנות?
    מאוד אשמח לתגובה….!
    תודה רבה!

כתיבת תגובה

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

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?