スタイルカスタムボタン

カスタマイズ可能なボタンコンポーネントをスタイリングするとき、CSSカスタム変数の力を調べましょう.
ボタンコンポーネントを構築します.我々のボタンは2色のバリアントをサポートします.primary and secondary . その上に、これらの4つの一般的な状態があります:通常の、ホバー、アクティブで、無効にします.

カラーバリアントは、primary or secondary ボタン要素のクラス.disabled 属性を使用してボタンを無効にします.ホバーとアクティブな状態のために我々は使用されます:hover and :active CSS擬似クラス.
ボタンのHTMLコードは非常に簡単です.ここではボタンの例を示します.

<button class="primary">Click Me</button>
<button class="primary" disabled>Click Me</button>

<button class="secondary">Click Me</button>
<button class="secondary" disabled>Click Me</button>

さあ、スタイリングを掘りましょう.記事のタイトルとして、私たちは多くのCSSのカスタムプロパティを使用します.
ボタンのスタイルは2つの部分で分割されます.

一般的なボタンスタイル

ボタンの色のバリアントのスタイル

一般的なボタンスタイルから始めましょう

button {
  color: var(--label-color);
  background-color: var(--background-color);
  border-color: var(--border-color);

  border-width: 4px;
  border-style: solid;

  padding: 10px 64px;
  border-radius: 8px;
  font-size: 18px;
}

button:hover {
  background-color: var(--background-hover-color);
}

button:active {
  background-color: var(--background-active-color);
}

button[disabled] {
  color: var(--label-disabled-color);
  background-color: var(--background-disabled-color);
  border-color: var(--border-disabled-color);
}

この部分は一般的なボタンの機能を定義しますpadding or border-radius これは両方の色のバリアントに共通です.
一方、すべての色のプロパティbackground-color or border-color 指定された色の変種(プライマリまたはセカンダリ)に依存する必要があります—background-color or —border-color . 次の部分で、これらの変数の色を指定します.
プライマリボタンバリアントの実際の色の値を定義することができます

button.primary {
  --label-color: hsl(0, 0%, 100%);
  --background-color: hsl(230, 60%, 50%);
  --border-color: hsl(230, 60%, 50%);
}

button.primary:hover {
  --background-hover-color: hsl(230, 60%, 55%);
}

button.primary:active {
  --background-active-color: hsl(230, 60%, 60%);
}

button.primary[disabled] {
  --label-disabled-color: hsl(0, 0%, 100%);
  --background-disabled-color: hsl(0, 0%, 63%);
  --border-disabled-color: hsl(0, 0%, 63%);
}

次のボタンの色のバリアントも同様です.

button.secondary {
  --label-color: hsl(230, 60%, 50%);
  --background-color: hsl(0, 0%, 100%);
  --border-color: hsl(230, 60%, 50%);
}

button.secondary:hover {
  --background-hover-color: hsl(230, 55%, 80%);
}

button.secondary:active {
  --background-active-color: hsl(230, 55%, 85%);
}

button.secondary[disabled] {
  --label-disabled-color: hsl(0, 0%, 63%);
  --background-disabled-color-color: hsl(0, 0%, 100%);
  --border-disabled-color: hsl(0, 0%, 63%);
}

あなたが見ることができるように、カスタムCSS変数は、私たちがまだ構造化されたコンポーネントのためのカスケーディングスタイルを保つのを助けることができます.我々はすぐに色の別のセットを定義するだけで我々のボタンの別の色の変種を追加することができます.
Codepenの上の完全なコード: