بناء مكون زر

نظرة عامة أساسية حول كيفية إنشاء مكوّنات <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">

في تحدي واجهة المستخدم الرسومية لهذا الشهر، كل زر على شكل أنماط تساعد في تمييز غرضه بصريًا. إعادة الضبط الأزرار ستظهر بألوان تحذيرية لأنها مدمرة، كما يجب إرسال الأزرار سوف تحصل على نص تمييز أزرق، حتى يظهر الترويج لها بشكل أكبر قليلاً من المعتاد الأزرار.

معاينة المجموعة النهائية لجميع أنواع الأزرار، والتي تظهر في نموذج وليس في نموذج مع إضافات رائعة لأزرار الرموز والأزرار المخصصة

ملاحظة: كانت الأزرار تعمل بطرقها الخاصة، فلم لا يتم تصميمها بما يتناسب مع سلوكها؟

تحتوي الأزرار أيضًا على فئات زائفة لاستخدامها مع 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) {
  …
}

جرِّب عرضًا توضيحيًا.

حلقة التركيز التفاعلية

أحب تحريك حلقة التركيز لمستخدمي لوحة المفاتيح والتكنولوجيا المساعِدة. مع نسبة شوائب تحقيق ذلك عن طريق تحريك المخطط التفصيلي بعيدًا عن الزر بمقدار 5 بكسل، ولكن عندما يكون الزر غير نشط. يؤدي هذا إلى إنشاء تأثير يجعل حلقة التركيز إعادة تصغير حجم الزر عند الضغط عليه.

: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

الأنماط

في هذا القسم التالي، سوف أقوم أولاً بإنشاء نظام خاصية مخصص لإدارة الأنماط التكيفية للزر. وباستخدام هذه الخصائص المخصصة، يمكنني البدء في تحديد العناصر وتخصيص مظهرها.

استراتيجية تكيُّفية للموقع المخصّص

تشبه استراتيجية الموقع المخصّص المستخدَمة في تحدّي واجهة المستخدم الرسومية هذا إلى حدّ كبير في إنشاء نظام ألوان. بالنسبة نظام ألوان مضيء وغامق تكيُّفي، تكون الخاصية المخصصة لكل مظهر وتسميتها وفقًا لذلك. ومن ثم يتم استخدام خاصية مخصصة واحدة للاحتفاظ القيمة الحالية للموضوع، ويتم تعيينها إلى خاصية 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 في هذه المشاركة الخصائص المخصّصة باستخدام الإعدادات التلقائية.

ما يعجبني هو أنّ المظهرَين الفاتح والداكن واضحان. تشير رسالة الأشكال البيانية نقل البيانات غير المباشرة والتجريد إلى السمة المخصّصة --_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%));

بالإضافة إلى ذلك، لمنح الأزرار مظهرًا ثلاثي الأبعاد بعض الشيء، سيكون شكل مربع 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);
  }
}

ولا يفيد ذلك في قراءة هذا الأمر بشكل جيد فحسب، بل يمكن لمستهلكي هذه الأزرار المخصصة استخدام الاكسسوارات العارية بثقة أنها ستتكيف بشكل مناسب مع تفضيلات المستخدم.

الحدّ من التعديلات على الحركة

إذا كانت الحركة مناسبة لهذا المستخدم الذي تتم زيارته، يجب تخصيص "--_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 على "بدون". انقر على ألوان التمييز (-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 التكيُّفي إلى موقع النقل:

: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 حتى النتيجة التي تم اجتيازها في أدوات مطوّري البرامج أو 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);
}

تخصيص أزرار إدخال الملفات

زر إدخال الملف هو حاوية لامتداد وزر. بإمكان خدمة مقارنة الأسعار (CSS) إجراء ما يلي: نمطًا لحاوية الإدخال قليلاً، بالإضافة إلى الزر المتداخل، ولكن لا المسافة. تم تحديد الحاوية بقيمة 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 للزر لدفع نص الامتداد. بعيدًا عن الزر، مما يخلق بعض المساحة.

: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