אם תנסו לעשות מעבר צבע בכפתור של טופס יצירת קשר באלמנטור תראו שלא ניתן לעשות את זה בדיפולט. כאן תוכלו לדעת איך זה אפשרי.
ככה נראה טופס רגיל שלא מציג מעבר צבע
העתיקו את קוד הCSS והדביקו בCSS מותאם של הטופס
/* צבע דיפולט של הכפתור עם גרדיינט */
selector .elementor-button {
background: linear-gradient(45deg, #3498db, #8e44ad); /* גרדיינט בזווית של 45 מעלות */
color: #ffffff; /* צבע הטקסט */
border: none; /* ללא גבול */
transition: background 0.5s ease;
}
/* גרדיינט במצב hover */
selector .elementor-button:hover {
background: linear-gradient(45deg, #e74c3c, #f39c12); /* גרדיינט שני במצב hover */
color: #ffffff; /* צבע הטקסט */
}
וכעת הטופס שלכם במעבר צבע.אתם יכולים לשנות את 2 הצבעים במצב רגיל וגם במצב מעבר על הכפתור.
למה שנרצה להציג כפתור בטופס בשני צבעים?
לעיתים נצטרך על פי עיצוב מוגדר מראש לייצר טופס כזה. או על מנת לעצב כפתור מגניב ומושך יותר מכפתור עם צבע אחד בלבד.
הצלחתם והשתמשתם במדריך? ספרו לי בתגובות
