דלג לתוכן
חברה לבניית אתרים YMDigital
  • ראשי
  • אודות
    • מהתקשורת
    • המלצות
    • שאלות נפוצות
  • ההתמחות שלנו
    • בניית אתר מכירות
    • בניית אתרי תדמית לעסקים
    • בניית אתר וורדפרס
    • קידום אתרים אורגני
  • מאמרים
  • תיק עבודות
  • יצירת קשר
  • ראשי
  • אודות
    • מהתקשורת
    • המלצות
    • שאלות נפוצות
  • ההתמחות שלנו
    • בניית אתר מכירות
    • בניית אתרי תדמית לעסקים
    • בניית אתר וורדפרס
    • קידום אתרים אורגני
  • מאמרים
  • תיק עבודות
  • יצירת קשר
להתקשרות 054-395-1900

כפתור בטופס יצירת קשר בשני צבעים

דף הבית » טיפים לאלמנטור » כפתור בטופס יצירת קשר בשני צבעים

  • יוסי מזרחי
  • אוגוסט 16, 2024
כפתור בטופס יצירת קשר בשני צבעים איך עושים את זה? בדיפולט אלמנטור מאפשר צבע אחד בלבד בכפתור יצירת קשר וכך תעשו מעבר צבע
לרכישת אלמנטור פרו
לרכישת קרוקובלוק ג'ט

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

ככה נראה טופס רגיל שלא מציג מעבר צבע

העתיקו את קוד ה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 הצבעים במצב רגיל וגם במצב מעבר על הכפתור. 

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

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

הצלחתם והשתמשתם במדריך? ספרו לי בתגובות

כתיבת תגובה לבטל

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

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

יצירת לופים מותאמים אישית (Custom Loops) באלמנטור פרו

לקריאת המאמר ⟵
יצירת לופים מותאמים אישית (Custom Loops) באלמנטור פרו
undefined

אנימציות Lottie: איך להוסיף תנועה לאתר בלי להכביד עליו?

לקריאת המאמר ⟵
אנימציות Lottie: איך להוסיף תנועה לאתר בלי להכביד עליו?
undefined

יצירת מגה תפריט באלמנטור: UX מנצח לאתרים גדולים

לקריאת המאמר ⟵
יצירת מגה תפריט באלמנטור: UX מנצח לאתרים גדולים
כפתור קרא עוד - אלמנטור

כפתור קרא עוד – אלמנטור

לקריאת המאמר ⟵
כפתור קרא עוד – אלמנטור
טקסט מסתובב באנימצייה קבועה

טקסט מסתובב באנימצייה קבועה

טקסט מסתובב באנימצייה קבועה באלמנטור - טרנד עיצובי שתפגשו בהמון אתרים ועם ההדרכה הבאה תדעו גם להשתמש בה בפרויקטים שלכם >>
לקריאת המאמר ⟵
טקסט מסתובב באנימצייה קבועה
כותרת אלמנטור עם רקע תמונה מאחורה

כותרת אלמנטור עם רקע תמונה מאחורה

כותרת אלמנטור עם רקע של תמונה יכול לעזור לכם בעיצובים מורכבים לפי הדרישה. מצורף לכם קוד לישום באתר שלכם
לקריאת המאמר ⟵
כותרת אלמנטור עם רקע תמונה מאחורה
YMdigital

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

חייגו עכשיו לשיחת ייעוץ! 054-395-1900 וואטסאפ
google ביקורות גוגל
5.0
ראו את כל 20 הביקורות

ניווט באתר

  • ראשי
  • אודות
  • המלצות
  • תיק עבודות
  • צור קשר

שירותי החברה

  • בניית אתר מכירות
  • בניית אתרי תדמית
  • בניית אתר וורדפרס
  • קידום אתרים אורגני
  • קורס פיתוח אתרים

מאמרים אחרונים

  • מכירת מנויים (Subscriptions) וחיובים חוזרים בווקומרס
  • תוספי Wishlist והשוואת מוצרים: למה זה קריטי להמרה?
  • סינון מוצרים מתקדם (JetSmartFilters): שיפור חוויית הקנייה
א'-ה' · 10:00–18:00 054-395-1900 Yossimzhp@gmail.com תנופה 7-ב חריש

© 2026 YMdigital · כל הזכויות שמורות

מפת אתר הצהרת נגישות מדיניות פרטיות תקנון
חייגו עכשיו לשיחת ייעוץ! 054-395-1900

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

הבנתי