Webページボタンの設(shè)計(jì)：3つのスタイルとCSS実裝この記事は2016年7月9日に更新され、最新のアクセシビリティのベストプラクティスに準(zhǔn)拠するために

タグに置き換えました。ボタンで作業(yè)している場合は、常に<a></a>タグに固執(zhí)してください。 <button></button> <button></button>ボタンは、あらゆるWebページの最も重要なコンポーネントの1つであり、多くの異なる狀態(tài)と機(jī)能があり、これらはすべて以前の設(shè)計(jì)決定と正しく一致する必要があります。この記事では、CSSコードとツールとともに、3つのボタン設(shè)計(jì)コンセプトを紹介して、新しい開発者が獨(dú)自のボタンを作成できるようにします。

さまざまなボタンの設(shè)計(jì)コンセプトを掘り下げる前に、CSSボタンの基本的な知識を確認(rèn)する必要があります。どのCSSコンポーネントが変化するかわからない場合、平坦化されたUIと材料設(shè)計(jì)の間の思考の違いを理解することは意味がありません。

CSSボタンの基本をすばやく確認(rèn)しましょう。

• 優(yōu)れたボタンの設(shè)計(jì)では、アクセシビリティを確保する必要があります。ボタンは、障害のある人や古いブラウザを使用しているユーザーが簡単にアクセスできるようにし、ユーザーがボタンの目的をすぐに理解できるように簡単なテキストを含める必要があります。 <button></button>
ボタンのデザインの3つの主な基本要素は、色、影、および移行時(shí)間であり、
• や
などのCSS擬似クラスを使用して操作できます。
• :hoverこの記事では、シンプルな黒と白のボタン、フラットUIボタン、材料デザインボタンの3つのボタンスタイルの例を示しています。それぞれに獨(dú)自のデザイン方法があります。 :active
獨(dú)自のボタン設(shè)計(jì)を作成するには、CSS3ボタンジェネレーターなどのツールを使用することをお?jiǎng)幛幛筏蓼埂?
• cssボタンの基本

良いボタンの定義はウェブサイトごとに異なりますが、いくつかの非技術(shù)的な基準(zhǔn)があります。

アクセシビリティ

1. シンプルなテキスト - テキストをボタンの內(nèi)側(cè)に短くしてクリアします。ユーザーは、ボタンが何であり、どこにあるかをすぐに理解できるはずです。
2. オンラインで表示されているほとんどすべてのボタンは、色の変化、変換時(shí)間、境界線と影の変化のバリエーションを使用しています。これらは、さまざまなCSS疑似クラスを使用して活用できます。そのうちの2つに焦點(diǎn)を當(dāng)てます - と
。

ほとんどの場合、ユーザーの間でマウスボタンを押してマウスボタンをリリースする間に実行されます。 :hover

擬似クラスを使用してボタンの表示全體を変更できますが、これはユーザーフレンドリーなアプローチではありません。初心者にとって良い戦略は、ボタンを馴染みなく保ちながら、ボタンの基本要素を小さく変更または単純な変更を加えることです。ボタンの3つの主要な基本要素は、色、影、変換時(shí)間です。

基本要素1—色

これは最も一般的な変更です。さまざまな屬性の色を変更できますが、最も単純な屬性はcolor、background-color、およびborderプロパティです。例にジャンプする前に、まずボタンの色を選択する方法に焦點(diǎn)を合わせましょう：

1. 色の組み合わせ - 補(bǔ)完的な色を使用します。 ColorHexaは、どの色を一緒に使用できるかを見つけるための優(yōu)れたツールです。まだ色を探している場合は、フラットUIカラーピッカーをチェックしてください。
2. パレットと一致します - 通常、使用しているパレットを一致させるのが最善です。まだカラーパレットを探している場合は、lolcolorsをチェックしてください。

基本要素2—シャドウ

box-shadowオブジェクトの周りに影を追加できます。ユニークな影を両側(cè)に追加でき、平らになったUIと材料のデザインはこのアイデアを利用します。 box-shadowの詳細(xì)については、MDNbox-shadowドキュメントを確認(rèn)してください。

基本要素3—移動(dòng)期間

transition-durationCSSの変更に時(shí)間スケールを追加できます。コンバージョン時(shí)間のないボタンは、すぐに:hoverCSSに変更されます。これは、ユーザーにとって不快な場合があります。このガイドのボタンの多くは、変換時(shí)間を使用して自然な感觸を作り出します。

次の例では、:hover：

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

変換を?qū)g行するコードは複雑であるため、古いブラウザは変換をわずかに異なって処理します。したがって、古いブラウザ用のベンダープレフィックスを含める必要があります。

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

デフォルトのボタンスタイルを削除します

カスタムスタイルを提供できるように、<button>要素からデフォルトのブラウザスタイルを削除するには、次のCSSを含めます。

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

CSSを変更する方法を変更する複雑で興味深い方法がたくさんあり、このクイックレビューは基本のみをカバーしています。

1 - シンプルな黒と白のボタン

これは通常、サイドプロジェクトに追加する最初のボタンです。そのシンプルさはさまざまなスタイルで機(jī)能するためです。このスタイルは、白黒の自然な完全なコントラストを利用しています。

これら2つの変更は非常に似ているため、白い背景を持つ黒いボタンを持つコードのみを?qū)毪筏蓼?。別のボタンを取得するには、それぞれの白と黒をひっくり返すだけです。

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

の両方向に変化が表示されます。これは非常に簡単な例です。ここから構(gòu)築するには、お?dú)荬巳毪辘违芝楗螗嗓紊颔ぅ螗攻豫飑`ションとして使用できます。 BrandColorsを使用することは、このタイプのブランドの色を見つけるのに最適な方法です。 background-color .2s 2 - フラットUIボタン

フラットUIはミニマリズムに焦點(diǎn)を當(dāng)て、小さな行動(dòng)を通して大きな物語を語ります。プロジェクトが形になり始めたら、通常、黒と白のボタンから平らなUIボタンに移動(dòng)します。フラットUIボタンは、ほとんどのデザインに収まるほどシンプルです。

ボタンの動(dòng)きを追加して3Dボタンをシミュレートして、以前のボタンを改善しましょう。

この例には5つのボタンが含まれていますが、唯一の変更は色だけなので、最初のボタンに焦點(diǎn)を當(dāng)てます。

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

の3つの狀態(tài)があります。 :hover :active不透明度を軽減するためのコードの1行しか含まれていないことに注意する価値があります。これは、新しい、実際に軽い色を見つけることなく、ボタンを軽く見せるための便利なトリックです。

CSS変數(shù)は新しいものではありませんが、一部は新しい方法で使用されています。 :hoverは固體の均一なラインではありませんが、

、およびborderを使用して3D深度効果を作成します。 border-bottom border-leftフラットUIボタンは広く使用されていますborder-right。サンプルボタンが

:active :active

1. 色が変わります。背景色は暗くなり、動(dòng)きをユーザーから物理的に離してページに入力します。繰り返しますが、この微妙な変更は、ユーザーがボタンをクリックしていることを思い出させます。 border-bottom
2. フラットUIボタンは、大きな物語を伝えるシンプルで最小限の動(dòng)きを大切にしています。多くは
を使用して淺い動(dòng)きを作成します。一部のフラットUIボタンはまったく移動(dòng)せず、色の変化を利用するだけであることに注意してください。

3 - 材料設(shè)計(jì)border-bottom

です

• スポーツは意味を與えます
これらの3つの原則をよりよく理解するために、材料設(shè)計(jì)の実用的なアプリケーションを見てみましょう。

タグは含まれていませんが、大規(guī)模なプロジェクトでポリマーを?qū)g裝する場合、実裝で

これらのボタンは、2つの主要なアイデアを使用しています。box-shadowとポリマー。

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}