בניית רכיב לחצן

סקירה כללית בסיסית על יצירת רכיבי <button> עם התאמה לצבע, תגובה נגישה.

Adam Argyle

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

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

אם אתם מעדיפים סרטון, הנה גרסה של הפוסט הזה ב-YouTube:

סקירה כללית

תמיכה בדפדפנים

• 1
• 12
• 1
• 1

מקור

הרכיב <button> מיועד לאינטראקציה עם משתמשים. האירוע click מופעל מהמקלדת, מהעכבר, מהמגע, מהקול ועוד, עם כללים חכמים לגבי התזמון שלו. בנוסף, בכל דפדפן יש כמה סגנונות שמוגדרים כברירת מחדל, כך שאפשר להשתמש בהם ישירות בלי לבצע התאמה אישית. אפשר להשתמש ב-color-scheme כדי לבחור גם בלחצנים בהירים וגם בלחצנים כהים שסופקו על ידי הדפדפן.

יש גם סוגים שונים של לחצנים, שכל אחד מהם מוצג בהטמעה הקודמת של Codepen. <button> ללא סוג יתאים ל-<form> וישתנה לסוג השליחה.

<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>

<!-- button state -->
<button disabled></button>

<!-- input buttons -->
<input type="button" />
<input type="file">

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

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

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

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

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}

תצוגה מקדימה של הקבוצה הסופית של כל סוגי הלחצנים בעיצוב כהה

Markup

בנוסף לסוגים של לחצנים שסופקו במפרט HTML, הוספתי לחצן עם סמל ולחצן עם סיווג btn-custom בהתאמה אישית.

<button>Default</button>
<input type="button" value="<input>"/>
<button>
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="..." />
  </svg>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">

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

<form>
  <button>Default</button>
  <input type="button" value="<input>"/>
  <button>Icon <span data-icon="cloud"></span></button>
  <button type="submit">Submit</button>
  <button type="button">Type Button</button>
  <button type="reset">Reset</button>
  <button disabled>Disabled</button>
  <button class="btn-custom btn-large" type="button">Large Custom</button>
  <input type="file">
</form>

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

נגישות

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

להעביר את העכבר מעל פריטים ולהתמקד בהם ביחד

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

button:is(:hover, :focus) {
  …
}

כדאי לנסות הדגמה!

טבעת מיקוד אינטראקטיבית

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

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

איך מוודאים שניגודיות הצבעים עומדת בדרישות

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

הסתרת סמלים מאנשים שלא יכולים לראות

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

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>

כלי הפיתוח ל-Chrome שמוצג בו עץ הנגישות של הלחצן. המערכת מתעלמת מתמונת הלחצן כי האפשרות aria-hidden מוגדרת כ-true

סגנונות

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

אסטרטגיה דינמית של מאפיין מותאם אישית

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

button {
  --_bg-light: white;
  --_bg-dark: black;
  --_bg: var(--_bg-light);

  background-color: var(--_bg);
}

@media (prefers-color-scheme: dark) {
  button {
    --_bg: var(--_bg-dark);
  }
}

הערה: הסכימה של הקו התחתון היא מ-Lea Verou, בפוסט הזה Custom properties with defaults.

מה שאהבתי הוא שהעיצוב הבהיר והעיצוב הכהה הם ברורים ומפורטים. ההפניה העקיפה וההפשטה מועברות לנכס המותאם אישית --_bg, שהוא עכשיו הנכס היחיד 'התגובתי'. --_bg-light ו---_bg-dark הם סטטיים. בנוסף, ברור שהעיצוב הבהיר הוא עיצוב ברירת המחדל, והעיצוב הכהה מופעל רק באופן מותנה.

הכנה לעקביות בעיצוב

הבורר המשותף

הבורר הבא משמש לטירגוט של כל סוגי הלחצנים השונים, והוא יכול להיראות קצת מבלבל בהתחלה. הקוד :where() משמש להתאמה אישית של הלחצן בלי צורך בפרטים ספציפיים. לעתים קרובות הלחצנים מותאמים לתרחישי עבודה חלופיים, והבורר :where() מבטיח שהמשימה תתבצע בקלות. בתוך :where(), כל סוג לחצן נבחר, כולל ::file-selector-button, שאי אפשר להשתמש בו בתוך :is() או :where().

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  …
}

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

צבע משני של לחצן

לחצני שליחה וסמלים הם מקום מצוין להוסיף קצת צבע:

--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);

צבע לטקסט של לחצן

צבעי הטקסט של הלחצנים הם לא לבן או שחור, אלא גרסאות בהירות או כהות של --_accent באמצעות hsl() תוך שמירה על הגוון 210:

--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);

צבע רקע לחצן

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

--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);

רקע לחצן

צבע הרקע הזה משמש להצגת משטח מאחורי משטחים אחרים, והוא שימושי לרקע של קלט הקובץ:

--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);

ריווח לחצן

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

--_padding-inline: 1.75ch;
--_padding-block: .75ch;

גבול הלחצן

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

--_border-radius: .5ch;

--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);

אפקט הדגשה של לחצן במצב של ריחוף מעליו

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

--_highlight-size: 0;

--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);

הצללת טקסט של לחצן

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

--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);

סמל של לחצן

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

--_icon-size: 2ch;
--_icon-color: var(--_accent);

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

צל הלחצן

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

--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);

--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);

בעזרת צבעים ועוצמות דינמיים, אפשר ליצור שני עומקי צללים:

--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));

--_shadow-2: 
  0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
  0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));

בנוסף, כדי לתת ללחצנים מראה קצת תלת-ממדי, הוספת box-shadow‏ 1px יוצרת את האשליה:

--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);

מעברים של לחצנים

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

--_transition-motion-reduce: ;
--_transition-motion-ok:
  box-shadow 145ms ease,
  outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);

הערה: בתכנונים המוקדמים של הלחצנים, הוספת אנימציה ל-border-color שהיה בנכס --_transition-motion-reduce. מאוחר יותר הסרתי את התמונה, אבל השארתי את התבנית למקרה שדעתי תשתנה שוב.

כל המאפיינים יחד בבורר

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  --_accent-light: hsl(210 100% 40%);
  --_accent-dark: hsl(210 50% 70%);
  --_accent: var(--_accent-light);


--_text-light: hsl(210 10% 30%);
  --_text-dark: hsl(210 5% 95%);
  --_text: var(--_text-light);

--_bg-light: hsl(0 0% 100%);
  --_bg-dark: hsl(210 9% 31%);
  --_bg: var(--_bg-light);

--_input-well-light: hsl(210 16% 87%);
  --_input-well-dark: hsl(204 10% 10%);
  --_input-well: var(--_input-well-light);

--_padding-inline: 1.75ch;
  --_padding-block: .75ch;

--_border-radius: .5ch;
  --_border-light: hsl(210 14% 89%);
  --_border-dark: var(--_bg-dark);
  --_border: var(--_border-light);

--_highlight-size: 0;
  --_highlight-light: hsl(210 10% 71% / 25%);
  --_highlight-dark: hsl(210 10% 5% / 25%);
  --_highlight: var(--_highlight-light);

--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%);
  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
  --_ink-shadow: var(--_ink-shadow-light);

--_icon-size: 2ch;
  --_icon-color-light: var(--_accent-light);
  --_icon-color-dark: var(--_accent-dark);
  --_icon-color: var(--accent, var(--_icon-color-light));

--_shadow-color-light: 220 3% 15%;
  --_shadow-color-dark: 220 40% 2%;
  --_shadow-color: var(--_shadow-color-light);
  --_shadow-strength-light: 1%;
  --_shadow-strength-dark: 25%;
  --_shadow-strength: var(--_shadow-strength-light);
  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
  --_shadow-2: 
    0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%))
  ;

--_shadow-depth-light: hsl(210 14% 89%);
  --_shadow-depth-dark: var(--_bg-dark);
  --_shadow-depth: var(--_shadow-depth-light);

--_transition-motion-reduce: ;
  --_transition-motion-ok:
    box-shadow 145ms ease,
    outline-offset 145ms ease
  ;
  --_transition: var(--_transition-motion-reduce);
}

התאמות לעיצוב כהה

הערך של התבנית של הפרמטרים הסטטיים -light ו--dark יתבהר כשמגדירים את הפרמטרים של העיצוב הכהה:

@media (prefers-color-scheme: dark) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_bg: var(--_bg-dark);
    --_text: var(--_text-dark);
    --_border: var(--_border-dark);
    --_accent: var(--_accent-dark);
    --_highlight: var(--_highlight-dark);
    --_input-well: var(--_input-well-dark);
    --_ink-shadow: var(--_ink-shadow-dark);
    --_shadow-depth: var(--_shadow-depth-dark);
    --_shadow-color: var(--_shadow-color-dark);
    --_shadow-strength: var(--_shadow-strength-dark);
  }
}

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

התאמות לתנועה מופחתת

אם המשתמש הזה בסדר עם התנועה, מקצים את --_transition ל-var(--_transition-motion-ok):

@media (prefers-reduced-motion: no-preference) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_transition: var(--_transition-motion-ok);
  }
}

כמה סגנונות משותפים

הגופנים של הלחצנים והכניסות צריכים להיות מוגדרים כ-inherit כדי שיתואמו לשאר הגופנים בדף. אחרת, הסגנון שלהם יוגדר על ידי הדפדפן. התנאי הזה רלוונטי גם ל-letter-spacing. הגדרת line-height לערך 1.5 מגדירה את גודל תיבת האותיות כך שיהיה קצת מקום מעל ומתחת לטקסט:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  /* …CSS variables */

  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  border-radius: var(--_border-radius);
}

עיצוב לחצנים

כוונון הבורר

הבורר input[type="file"] הוא לא החלק של הלחצן בקלט, אלא רכיב הסימון ::file-selector-button, לכן הסרתי את input[type="file"] מהרשימה:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  
}

התאמות של הסמן והמגע

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;
}

הערה: אין צורך ב-touch-action: manipulation אם במסמך ה-HTML יש <meta name="viewport" content="width=device-width">. כאן אפשר לקבל מידע נוסף בנושא Chrome למפתחים.

צבעים וגבולות

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  font-size: var(--_size, 1rem);
  font-weight: 700;
  background: var(--_bg);
  color: var(--_text);
  border: 2px solid var(--_border);
}

אזורים כהים

בלחצנים יש כמה שיטות מצוינות. הסמל text-shadow מתאים לעיצוב בהיר ועיצוב כהה, וכך יוצר מראה עדין ונעים של טקסט הלחצן שמתאים לרקע. ל-box-shadow הוקצו שלושה צללים. הערך הראשון, --_shadow-2, הוא צללית רגילה של תיבה. הצל השני הוא טריק שמטרתו להטעות את העין ולגרום ללחצן להיראות קצת משופע. הצללית האחרונה היא להדגשת העכבר מעל הלחצן. בהתחלה היא תהיה בגודל 0, אבל בהמשך היא תקבל גודל ותעבור טרנספורמציה כך שתראה כאילו היא גדלה מהלחצן.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  box-shadow: 
    var(--_shadow-2),
    var(--_shadow-depth),
    0 0 0 var(--_highlight-size) var(--_highlight)
  ;
  text-shadow: var(--_ink-shadow);
}

פריסה

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

ריווח

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  gap: 1ch;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
}

חוויית משתמש למגע ולעכבר

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

בדרך כלל, חוויית המשתמש עם לחצנים באפליקציות מובנות היא שונה, ולכן אני משבית את ההגדרה הזו על ידי הגדרת user-select ל-none. צבעי הדגשה בהקשה (-webkit-tap-highlight-color) ותפריטי ההקשר של מערכת ההפעלה (-webkit-touch-callout) הם תכונות לחצן אחרות שמתמקדות באינטרנט ולא תואמות לציפיות הכלליות של המשתמשים לגבי לחצנים, ולכן גם אותן אני מסיר.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

מעברים.

משתנה --_transition המותאם אישית מוקצה לנכס transition:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  transition: var(--_transition);
}

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):where(:not(:active):hover) {
  --_highlight-size: .5rem;
}

הערה: ה-::file-selector-button לא נכלל בבורר כי לא ניתן לראות עליו את האפקט.

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

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

סמלים

כדי לטפל בסמלים, הסלקטור כולל סלקטור :where() נוסף לצאצאים ישירים של SVG או לאלמנטים עם המאפיין המותאם אישית data-icon. גודל הסמל מוגדר באמצעות המאפיין המותאם אישית באמצעות מאפיינים לוגיים בתוך שורה ומאפיינים לוגיים של בלוק. מוגדר צבע הקו, וגם drop-shadow שמתאים ל-text-shadow. flex-shrink מוגדר כ-0 כדי שהסמל לא יתכווץ. לבסוף, בוחרים סמלים עם קווים ומקצים להם את הסגנונות האלה באמצעות fill: none ו-round לקצוות הקווים ולצירופי הקווים:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) > :where(svg, [data-icon]) {
  block-size: var(--_icon-size);
  inline-size: var(--_icon-size);
  stroke: var(--_icon-color);
  filter: drop-shadow(var(--_ink-shadow));

  flex-shrink: 0;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

התאמה אישית של לחצני שליחה

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

:where(
  [type="submit"], 
  form button:not([type],[disabled])
) {
  --_text: var(--_accent);
}

התאמה אישית של לחצני האיפוס

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

:where([type="reset"]) {
  --_border-light: hsl(0 100% 83%);
  --_highlight-light: hsl(0 100% 89% / 20%);
  --_text-light: hsl(0 80% 50%);
  --_text-dark: hsl(0 100% 89%);
}

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

:where([type="reset"]):focus-visible {
  outline-color: currentColor;
}

התאמה אישית של לחצנים מושבתים

לעתים קרובות, לחצנים מושבתים מוצגים עם ניגודיות צבעים נמוכה, במטרה להפחית את הפעילות שלהם. בדקתי כל קבוצת צבעים ולוודא שהיא עומדת בדרישות, שיניתי את ערך הבהירות ב-HSL עד שהציון עמד בדרישות ב-DevTools או ב-VisBug.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
)[disabled] {
  --_bg: none;
  --_text-light: hsl(210 7% 40%);
  --_text-dark: hsl(210 11% 71%);

  cursor: not-allowed;
  box-shadow: var(--_shadow-1);
}

התאמה אישית של לחצני קלט של קבצים

לחצן הקלט של הקובץ הוא מאגר של span ושל לחצן. אפשר להשתמש ב-CSS כדי לעצב קצת את מאגר הקלט ואת הלחצן המוטמע, אבל לא את ה-span. המארז מקבל את הערך max-inline-size כדי שלא יתרחב יותר מדי, בעוד שהערך inline-size: 100% יאפשר לו להתכווץ ולהתאים למארזים קטנים יותר. צבע הרקע מוגדר כצבע אדפטיבי כהה יותר מפני השטחים האחרים, כך שהוא נראה מאחורי לחצן בורר הקבצים.

:where(input[type="file"]) {
  inline-size: 100%;
  max-inline-size: max-content;
  background-color: var(--_input-well);
}

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

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
  appearance: none;
}

לבסוף, הוסיפו שוליים ל-inline-end של הלחצן כדי לדחוף את טקסט ה-span מהלחצן, וכך ליצור רווח.

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--_padding-inline);
}

חריגים מיוחדים לעיצוב כהה

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

@media (prefers-color-scheme: dark) {
  :where(
    [type="submit"],
    [type="reset"],
    [disabled],
    form button:not([type="button"])
  ) {
    --_bg: var(--_input-well);
  }
}

יצירת וריאציות

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

לחצן חזק

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

.btn-custom {
  --_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
  --_border: hsl(228 89% 63%);
  --_text: hsl(228 89% 100%);
  --_ink-shadow: 0 1px 0 hsl(228 57% 50%);
  --_highlight: hsl(228 94% 67% / 20%);
}

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

לחצן גדול

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

.btn-large {
  --_size: 1.5rem;
}

לחצן של סמל

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

[data-icon="cloud"] {
  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;

  -webkit-mask: var(--icon-cloud);
  mask: var(--icon-cloud);
  background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}

סיכום

עכשיו, אחרי שסיפרתי לך איך עשיתי את זה, איך היית עושה את זה? 🙂

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

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

רמיקסים של הקהילה

עדיין אין מה לראות כאן.

משאבים

• קוד המקור ב-GitHub