עיצוב כפתורים לאתר: כללים, דוגמאות וטעויות

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

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

במדריך תמצאו:

• במה כפתור שונה מקישור ולמה זה חשוב גם לקוד;
• אילו סוגי כפתורים יש ואיך בונים ביניהם היררכיה;
• מה הגודל המינימלי של כפתור ואיפה למקם אותו, כולל באתר מימין לשמאל;
• איך בוחרים צבע וצורה ועומדים בדרישות הניגודיות;
• מה לכתוב על הכפתור ומה לא;
• אילו מצבים צריכים להיות לכל כפתור, ולמה hover לא עובד בנייד;
• טעויות נפוצות ואיך בונים מערכת כפתורים אחידה ב-Figma, ב-Webflow וב-WordPress.

מה זה כפתור באתר ובמה הוא שונה מקישור

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

כדאי להבחין בין כפתור לבין קישור, כי מדובר בשני תפקידים שונים:

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

בשפת העיצוב הגבול הזה מיטשטש לפעמים: קישור לעמוד "צור קשר" מעוצב לא פעם ככפתור, וזה לגיטימי לגמרי. אבל בקוד חשוב לשמור על ההבחנה. פעולה צריכה להיבנות כאלמנט button, ומעבר לעמוד כאלמנט a עם href. קוראי מסך, ניווט במקלדת ומנועי חיפוש מבינים את שני האלמנטים אחרת. כשבונים "כפתור" מ-div עם סקריפט, הוא נראה תקין על המסך, אבל גולש שמנווט במקלדת לא יוכל להגיע אליו, וקורא מסך לא יזהה אותו ככפתור.

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

סוגי כפתורים באתר והיררכיה ביניהם

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

כפתור ראשי (Primary)

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

כפתור משני (Secondary)

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

כפתור שלישוני (Tertiary)

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

כפתורים מיוחדים: פעולה הרסנית ופעולה לא זמינה

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

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

גודל, מיקום ומרווחים

כפתור יפה שקשה ללחוץ עליו הוא כפתור גרוע. הגודל והמיקום קובעים אם הגולש ימצא אותו בכלל, ואם יצליח ללחוץ בלי לפספס.

גודל מינימלי של אזור הלחיצה

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

• הנחיות הנגישות WCAG 2.2 דורשות ברמה AA אזור לחיצה של 24 על 24 פיקסלים לפחות (או מרווח מספיק סביב רכיב קטן יותר), וממליצות ברמה AAA על 44 על 44 פיקסלים.
• ההנחיות של Apple לממשקי iOS ממליצות על 44 על 44 נקודות לפחות, וההנחיות של Material Design של Google ממליצות על 48 על 48.

בפועל, כפתור ראשי באתר בנייד מקבל לרוב גובה של 44 עד 56 פיקסלים, ולעיתים קרובות הוא נמתח לכל רוחב המסך. גם כפתור שנראה קטן יכול לקבל אזור לחיצה גדול יותר בעזרת ריפוד (padding), בלי לשנות את המראה.

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

איפה למקם את הכפתור הראשי

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

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

אתר בעברית: לחשוב מימין לשמאל

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

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

מרווחים בין כפתורים

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

צבע, ניגודיות וצורה

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

ניגודיות שעומדת בתקן

הכפתור צריך להיות קריא לכל הגולשים, כולל אנשים עם לקות ראייה או עיוורון צבעים, וגם במסך טלפון ישן או בשמש של אמצע היום. הנחיות WCAG, שעליהן מבוסס התקן הישראלי ת״י 5568, מגדירות שני ספים:

• הטקסט על הכפתור צריך ניגודיות של 4.5:1 לפחות מול צבע הכפתור (או 3:1 לטקסט גדול במיוחד).
• הגבולות של הכפתור עצמו, כלומר הצורה שמאפשרת לזהות אותו, צריכים ניגודיות של 3:1 לפחות מול הרקע.

כלים כמו WebAIM Contrast Checker או בדיקת הניגודיות המובנית ב-Chrome DevTools עונים על השאלה הזו בשניות. שווה לבדוק כבר בשלב העיצוב, ולא לגלות את הבעיה אחרי ההשקה.

לא לסמוך רק על צבע

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

צורה: פינות ישרות או מעוגלות

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

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

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

הטקסט על הכפתור: מה לכתוב כדי שיהיה ברור

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

פועל שמתאר את הפעולה

הבחירה הטובה ביותר לכפתור ראשי היא פועל שמתאר בדיוק את הפעולה: "הוסיפו לסל", "הורידו את המדריך", "קבעו שיחת ייעוץ". גולש שקורא את הכפתור יודע מה יקבל. לעומת זאת, מילים כלליות כמו "אישור", "שלח" או "הבא" מתאימות רק להקשר ברור מאוד, למשל בתוך חלון קופץ או בשלב בטופס רב-שלבי. בעמוד הבית הן לא אומרות דבר.

להתאים את הכפתור להבטחה

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

עברית: פנייה, מגדר וטון

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

• לשון רבים: "הזמינו עכשיו", "קבלו הצעת מחיר". זה הפתרון הנפוץ ביותר באתרים עסקיים.
• שם פעולה: "להזמנה", "לתיאום פגישה", "להורדת המדריך". קצר, ניטרלי ועובד היטב על כפתורים.
• גוף ראשון: "אני רוצה הצעה", "שלחו לי את המדריך". מוסיף מגע אישי, ומתאים במיוחד לטפסים ולהצעות.

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

מתי טקסט ארוך דווקא נחוץ

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

מצבי הכפתור: hover, focus, active, loading ו-disabled

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

• Default – המצב הרגיל, כשלא עושים עם הכפתור כלום.
• Hover – הסמן מרחף מעל הכפתור: הצבע מתכהה מעט, מופיע צל או שהכפתור מתרומם קלות.
• Focus – הכפתור נבחר בעזרת המקלדת (Tab) או טכנולוגיה מסייעת, ומקבל מסגרת ברורה.
• Active / Pressed – רגע הלחיצה עצמו: הכפתור "נלחץ" פנימה או מתכהה.
• Loading – הבקשה נשלחה ומתבצעת: מופיע ספינר, והכפתור ננעל כדי למנוע לחיצה כפולה.
• Disabled – הפעולה לא זמינה כרגע.

hover לא קיים בנייד

בטלפון ובטאבלט אין סמן, ולכן אין ריחוף. כל מידע שמופיע רק ב-hover, כמו הסבר, מחיר או קישור נוסף, פשוט לא יגיע לגולשים בנייד. בנוסף, בחלק מהדפדפנים בנייד מצב ה-hover "נתקע" אחרי נגיעה, והכפתור נשאר צבוע. הפתרון בקוד הוא להגדיר אפקטים של ריחוף בתוך @media (hover: hover), כך שיופעלו רק במכשירים שבאמת תומכים בריחוף.

focus: לא למחוק את המסגרת

מעצבים רבים מסירים את מסגרת ה-focus של הדפדפן כי היא "מכוערת". זו טעות נגישות חמורה: גולש שמנווט במקלדת לא יודע איפה הוא נמצא. במקום למחוק, עצבו מסגרת משלכם שמתאימה למותג. בזכות :focus-visible המסגרת תופיע רק בניווט במקלדת ולא בכל לחיצה בעכבר. WCAG 2.2 מוסיפה דרישה שהרכיב שבפוקוס לא יוסתר, למשל מאחורי כותרת דביקה או באנר עוגיות.

loading: למנוע לחיצה כפולה

כשהשליחה לוקחת שנייה או שתיים, גולשים לוחצים שוב. התוצאה: שתי פניות ב-CRM, שני חיובים או שתי הזמנות. מצב טעינה ברור, שנועל את הכפתור עד שמגיעה תשובה, פותר את זה. אחרי השליחה חשוב להציג הודעת הצלחה או שגיאה מפורשת, ולא להשאיר את הגולש לנחש.

disabled: להסביר למה

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

בלי להגזים באנימציה

אנימציה עדינה במעבר בין מצבים, סביב 150 עד 250 מילישניות, גורמת לממשק להרגיש חי ומגיב. אבל כפתור שרוטט, מהבהב או בורח מהסמן מעצבן, ולפעמים ממש מקשה ללחוץ. כבדו גם את ההגדרה prefers-reduced-motion, שבה גולשים מבקשים ממערכת ההפעלה פחות תנועה.

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

אלה הטעויות שאנחנו פוגשים הכי הרבה כשאנחנו מבצעים ביקורת UX לאתרים קיימים, ואיך מתקנים כל אחת.

הכפתור נראה כמו טקסט רגיל

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

ניגודיות חלשה

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

יותר מדי כפתורים בולטים

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

הכפתור רחוק מהתוכן שלו

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

צבע שסותר את משמעות הפעולה

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

כפתורים צפופים מדי בנייד

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

כפתורים שונים בכל עמוד

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

איך בונים מערכת כפתורים אחידה ובודקים שהיא עובדת

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

שלב 1: להגדיר את המערכת בעיצוב

ב-Figma בונים רכיב (Component) של כפתור עם וריאנטים: סוג (ראשי, משני, שלישוני, הרסני), גודל (למשל קטן, רגיל, גדול) ומצב (רגיל, hover, focus, לחוץ, טעינה, לא זמין). הצבעים והרדיוסים מוגדרים כמשתנים, כך ששינוי אחד מתעדכן בכל מקום. אם אתם בתחילת הדרך עם הכלי, כדאי לקרוא את המדריך המלא שלנו ל-Figma. כבר בשלב הווירפריים כדאי לסמן איפה נמצא הכפתור הראשי בכל מסך.

שלב 2: לבנות את המערכת באתר

• ב-Webflow מגדירים מחלקה בסיסית, למשל button, ומחלקות משולבות כמו is-secondary או is-small, בדומה לשיטת Client-First. את מצבי hover, pressed ו-focus מעצבים בלוח הסגנונות, ואת הכפתור הנפוץ שומרים כרכיב (Component) שאפשר לשנות בו טקסט וקישור.
• ב-WordPress מגדירים את עיצוב הכפתורים ברמת התבנית: בקובץ theme.json בתבניות בלוקים, או בהגדרות הגלובליות של Elementor. כך כל כפתור חדש יורש את אותו מראה.

המטרה בשתי הפלטפורמות זהה: אף אחד לא מעצב כפתור "ידנית" בעמוד בודד.

שלב 3: לבדוק לפני העלייה לאוויר

• לעבור על כל האתר עם מקש Tab ולוודא שכל כפתור מקבל פוקוס גלוי.
• לבדוק ניגודיות של כל שילוב צבעים.
• ללחוץ על כל כפתור בטלפון אמיתי, לא רק בסימולטור.
• להריץ Lighthouse ב-Chrome ולתקן את הערות הנגישות.

שלב 4: למדוד ולשפר

אחרי ההשקה הכפתורים הופכים לנתונים. הגדירו אירוע ב-Google Analytics 4 ללחיצה על כל כפתור ראשי, והשתמשו במפות חום, למשל ב-Microsoft Clarity החינמי, כדי לראות על מה הגולשים לוחצים ועל מה לא. אם כפתור חשוב מקבל מעט לחיצות, בדקו את המיקום, הטקסט והניגודיות, ושנו דבר אחד בכל פעם. על כל העקרונות של עמוד שממיר אפשר לקרוא במדריך לעיצוב דף נחיתה.

איך RJL Studio מעצבת כפתורים שמביאים לחיצות

ב-RJL Studio אנחנו מתכננים את הכפתורים כחלק מתרחיש הגולש כולו: מה הפעולה המרכזית בכל עמוד, איפה היא מופיעה ואיך נראה כל מצב שלה. אנחנו בונים מערכת כפתורים ב-Figma ומיישמים אותה ב-Webflow או ב-WordPress, בודקים ניגודיות ונגישות לפי ת״י 5568, מתאימים את הכל לעברית ולכיוון מימין לשמאל, ומגדירים מדידת לחיצות ב-Google Analytics 4 כדי לדעת מה באמת עובד.

רוצים אתר שבו ברור לגולש מה לעשות? קראו על שירותי עיצוב UX/UI שלנו ועל בניית אתרים ב-Webflow, או השאירו פרטים ונחזור אליכם.

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

מה הגודל המומלץ לכפתור באתר?

לכפתור ראשי בנייד מומלץ אזור לחיצה בגובה 44 עד 56 פיקסלים. תקן WCAG 2.2 דורש לפחות 24 על 24 פיקסלים ברמה AA, וממליץ על 44 על 44 ברמה AAA. אפשר להגדיל את אזור הלחיצה בעזרת ריפוד בלי לשנות את המראה.

כמה כפתורים ראשיים יכולים להיות בעמוד אחד?

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

איזה צבע הכי טוב לכפתור?

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

מה לכתוב על כפתור בעברית?

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

האם כפתור לא זמין (disabled) פוגע בנגישות?

הוא עלול לפגוע, כי כפתור עם המאפיין disabled לא מקבל פוקוס ולא מסביר למה הוא לא פעיל. עדיף להשאיר את הכפתור פעיל ולהציג הודעת שגיאה ברורה בלחיצה, או לפחות להוסיף טקסט קצר ליד הכפתור שמסביר מה חסר.