ボタン コンポーネントの作成

色適応性が高く、応答性が高く、アクセスしやすい <button> コンポーネントを作成する方法の基本概要。

Adam Argyle

この投稿では、色適応、カスタマイズ、カスタマイズ、 レスポンシブでアクセスしやすい <button> 要素を追加します。 デモをお試しください、 出典

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ライトモードとダークモードでは、キーボードとマウスでボタンを操作できます。

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

概要

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

「 <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 チャレンジでは、 各ボタンにスタイルが適用されるため、意図を視覚的に区別できます。リセット ボタン は破壊的なので警告の色が付きます。送信して ボタン 青いアクセント テキストが通常のテキストよりも少し強調されている できます。

<ph type="x-smartling-placeholder">
</ph> すべてのボタンタイプの最終セットのプレビュー。フォームではなくフォームで表示されます。アイコンボタンとカスタマイズされたボタンも適切に追加されています。 <ph type="x-smartling-placeholder">
</ph> フォーム内ではなくフォーム内に表示される、すべてのタイプのボタンの最終セットのプレビュー アイコンボタンとカスタマイズされたボタンが適切に追加されています。
をご覧ください。

ボタンには疑似クラスもある CSS がスタイル設定に使用する テンプレートを定義しますこれらのクラスは、CSS フックを使用して、 ボタン感: :hover ボタンにカーソルを合わせた際に :active: マウス操作の またはキーボードが押されているときに、 :focus または :focus-visible ユーザー補助技術のスタイル設定を支援しています

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
<ph type="x-smartling-placeholder">
</ph> ダークモードのすべてのボタンタイプの最終セットのプレビュー。
ダークモードのすべてのボタンタイプの最終セットのプレビュー

マークアップ

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>

現時点では、組み合わせの行列は非常に複雑です。次の間ボタン 型、疑似クラス、フォームの入出力など、多岐にわたる 組み合わせたものです。CSS がそれぞれのメリットを明確にできると 明確です。

ユーザー補助

ボタン要素には自然にアクセスできますが、 強化できます。

カーソルを合わせてフォーカスを合わせる

:hover と :focus を :is() 関数でグループ化します。 疑似セレクタですこれにより、インターフェースで常にキーボードが考慮されるようになる 支援技術のスタイルを定めています

button:is(:hover, :focus) {
  …
}
<ph type="x-smartling-placeholder">
</ph>
デモをお試しください。

インタラクティブなフォーカス リング

キーボードや支援技術のユーザー向けにフォーカス リングをアニメーション表示するのが好きです。私は ボタンから 5 ピクセル離れた位置にアウトラインをアニメーション化しますが、 ボタンがアクティブでないときに発生します。これにより、フォーカス リングが 押すとボタンのサイズに縮小されます。

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

パス時の色のコントラストを確保する

ライトとダークで少なくとも 4 色の組み合わせがある 色のコントラストを考慮する必要がある: ボタン、送信ボタン、リセットボタン、 クリックします。ここで VisBug を使用して、 すべてのスコアを一度に検査して表示します。

見えない人にアイコンを非表示にする

アイコンボタンを作成する際は、アイコンでコンテンツを視覚的にサポート ボタンテキストを入力します。視力のある人にとってはアイコンが役に立たないという意味でもあります 損失です。幸いなことに、ブラウザにはスクリーン リーダーで項目を非表示にする機能があります 視覚障がいを持つ人も装飾ボタンを 気にする必要はありません images:

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>
<ph type="x-smartling-placeholder">
</ph> ボタンのユーザー補助ツリーを表示している Chrome DevTools。aria-hidden が true に設定されているため、ツリーはボタン画像を無視します。
ボタンのユーザー補助ツリーを表示している Chrome DevTools。 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);
  }
}

私が気に入っている点は、ライトモードとダークモードが宣言的で明確であることです。「 間接参照と抽象化は --_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 {
  …
}

すべてのカスタム プロパティのスコープは、このセレクタになります。確認時間 すべてのカスタムプロパティを 参照できます多数のカスタム プロパティが ] ボタンを離します。各グループについて説明していきます。次に、 モーションのコンテキストについて 説明します

ボタンのアクセント カラー

[Submit] ボタンと [Submit] ボタンとアイコンは、ポップな色をするのに最適な場所です。

--_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;

ボタンの枠線

ボタンの枠線の半径をカスタム プロパティに隠して、ファイル入力で 他のボタンと合わせます。枠線の色は、設定済みのアダプティブ カラーに従います。 system:

--_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 の相対的な長さの単位により、2 文字のサイズになります。 これも、ボタンのテキストに比例してアイコンをスケーリングするのに役立ちます。「 アイコンの色は、アダプティブ モードとテーマ内モードの --_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);

色と強度をアダプティブにすることで、次の 2 種類のシャドウを組み合わせて適用できます。

--_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%));

さらに、ボタンをやや 3D にするために、1px のボックス シャドウを使用します。 次の錯覚が発生します。

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

ボタンの切り替え

アダプティブ カラーのパターンに従って、2 つの静的プロパティを作成します。 デザイン システムのオプションを保持します。

--_transition-motion-reduce: ;
--_transition-motion-ok:
  box-shadow 145ms ease,
  outline-offset 145ms ease
;
--_transition: var(--_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;
}

色と枠線

次に、フォントサイズ、背景、テキスト、枠線の色をカスタマイズします。 次の内容です。

: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 3 つのシャドウが割り当てられます。1 つ目の --_shadow-2 は、通常のボックス シャドウです。 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);
}

上のスタイルを適用した後のボタンを示すスクリーンショット

レイアウト

ボタンにはフレックスボックス レイアウトとし、 そのコンテンツに合う inline-flex レイアウトを作成します。次に中央揃え 子を垂直方向および水平方向にそろえて center:これにより、アイコンやその他の 配置する必要があります

: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);
}

上のスタイルを適用した後のボタンを示すスクリーンショット

タップとマウスの UX

このセクションは主に、モバイル デバイスのタッチユーザーを対象としています。最初の プロパティ 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;
}
をご覧ください。

フォーカス時に、ボタンからのフォーカス アウトラインのオフセットを大きくして、 ボタン内から成長しているように見える魅力的なフォーカスの外観:

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

アイコン

アイコンを処理するために、直接 SVG 用の :where() セレクタがセレクタに追加されました カスタム属性 data-icon を持つ子または要素を指定します。アイコンのサイズが設定されている ブロック論理プロパティを使用します。ストロークの色 その値と、 drop-shadow 一致します。text-shadowflex-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);
}

上のスタイルを適用した後のボタンを示すスクリーンショット

ファイル入力ボタンのカスタマイズ

ファイル入力ボタンは、スパンとボタンのコンテナです。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);
  }
}

上のスタイルを適用した後のボタンを示すスクリーンショット

パターンを作成する

今回は面白さと実用性の高さから、 あります。1 つのバリエーションは非常に鮮やかで、プライマリ ボタンの使用頻度と類似しています 見てくださいもう 1 つのバリエーションは大きいです。最後のバリエーションには、グラデーションで塗りつぶされたアイコンが表示されています。

鮮やかなボタン

このボタンスタイルを実現するため、ベースプロップを青で直接上書きしました。 できます。これは簡単でしたが、アダプティブな小道具や外観が不要になりました。 ライトモードとダークモードで同じです。

.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%);
}

カスタムボタンは明るい色と暗い色で表示されます。典型的なメイン アクション ボタンに見られるように、非常に鮮やかな青色です。

大きいボタン

このスタイルのボタンは、--_size カスタム プロパティを変更することで実現できます。 パディングやその他のスペース要素は、このサイズを基準にしてスケーリングされます。 新しいサイズに比例します

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

カスタムボタンの横に、約 150 倍の大きなボタンが表示されています。

アイコンボタン

このアイコン効果はボタンのスタイルとは関係ありませんが、 いくつかの 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));
}

アイコン付きのボタンは、ライトモードとダークモードで表示されます。

まとめ

どのようにやり方をしたかわかったので、どのように感じますか？ ‽ 🙂?

アプローチを多様化して、ウェブで構築するすべての方法を学びましょう。

デモを作成し、ツイートしてリンクを送ってください 下の [コミュニティリミックス]セクションに アクセスしてください

コミュニティ リミックス

ここにはまだ何も表示されません。

リソース