最新のCSSボタンの基本の紹介

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

タグを

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

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

CSSボタンの基本をすばやく確認しましょう。

キーポイント

タグを使用することは、最新のアクセシビリティのベストプラクティスでボタンを処理するための推奨方法です。

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

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

アクセシビリティ

- これが最も重要なことです。ボタンは、障害のある人と古いブラウザーを使用しているユーザーが簡単にアクセスできるはずです。ネットワークの開放性は美しいです。不注意なCSSで破壊しないでください。

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

pseudo-classは、マウスがオブジェクトの上にホールするときにCSSがどのように変化するかを定義します。

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

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

基本要素1—色

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

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

基本要素2—シャドウ

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

基本要素3—移動期間

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

次の例では、:hover：

の場合、ボタンスタイルをソフトな方法（0.5秒以上）で変換します。

<code class="language-css">.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;
}</code>

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

<code class="language-css">transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>

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

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

ただし、デフォルトでは、すべてのボタンよりも、ボタン要素のクラスに適用することをお勧めします。

<code class="language-css">button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}</code>

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

3つのボタンスタイル

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

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

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

<code class="language-css">.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;
}</code>

上記のスタイルでは、変換期間中にフォントと

の両方向に変化が表示されます。これは非常に簡単な例です。ここから構築するには、お気に入りのブランドの色をインスピレーションとして使用できます。 BrandColorsを使用することは、このタイプのブランドの色を見つけるのに最適な方法です。 background-color .2s 2 - フラットUIボタン

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

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

この例には5つのボタンが含まれていますが、唯一の変更は色だけなので、最初のボタンに焦点を当てます。

このボタンには、一般（ステートレス名）、

<code class="language-css">transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>

、

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

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

、

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

になると、2つのことが起こります。

:active :active

3pxから1pxに変更します。これにより、ボタンの下の影がボタンオブジェクト全体を数ピクセル単位で縮小して移動します。簡単ですが、この変更は、ユーザーがページにボタンをクリックしていると感じるのに役立ちます。

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

3 - 材料設計border-bottom

マテリアルデザインは、情報カードを促進し、魅力的なアクションを備えたデザインコンセプトです。 Googleは「マテリアルデザイン」の概念を設計し、マテリアルデザインのホームページに3つの主要な原則をリストしました。

素材は比phor

です

大胆、グラフィック、目的のある

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

注：この例には、ポリマーのボタンのデフォルトタグに従うため、この例には

タグは含まれていませんが、大規模なプロジェクトでポリマーを実装する場合、実装で

タグの使用を調査する価値がありますタグの代わりに。これについては、今後の記事で詳しく説明します。

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

ポリマーは、ウェブサイトの設計に役立つコンポーネントとツールのフレームワークです。ブートストラップに精通している場合、ポリマーは非常に似ています。上記の強力なリップル効果は、1行のコードに追加できます。

<code class="language-css">.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;
}</code>

<paper-ripple fit></paper-ripple>はポリマー成分です。 HTMLの開始時にポリマーをインポートすることにより、一般的なフレームワークとそのコンポーネントにアクセスできます。ポリマープロジェクトのホームページで詳細をご覧ください。

ポリマーが何であり、波紋がどこから来たのか（どのように機能するかは別のストーリー）を理解したので、ボタンを際立たせるために材料設計の原則を実装するのに役立つCSSを議論しましょう。

<code class="language-css">transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>

これらのボタンは、box-shadowを使用して、ほとんどのデザインを実現します。変化しないCSSを削除することにより、box-shadowをどのように変化させ、魔法をかけるかを見てみましょう：

<code class="language-css">button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}</code>

box-shadow各ボタンの左と下部に薄い影を配置するために使用されます。クリックすると、影はさらに伸びて暗くなります。このアクションは、ページからユーザーにジャンプするボタンの3Dシャドウをシミュレートします。このアクションは、マテリアルデザインスタイルとその実用的なアプリケーションの原則の一部です。

材料デザインボタンは、ポリマーとbox-shadow効果を組み合わせることで作成できます。

• マテリアルは比phorです。box-shadowを使用すると、実際のオブジェクトに表示される3Dシャドウをシミュレートできます
• 大胆でグラフィック、目的のある - これは、明るい青と緑のボタンにとってより現実的であり、これらのボタンはそれを完全に満たしています。
• 動きには意味があります - ポリマーとbox-shadow変換を使用すると、ユーザーがボタンをクリックすると多くの動きを作成できます。

この記事では、3つの異なる設計方法を使用してボタンを作成する方法について説明します。独自のボタンデザインプロトタイプを作成する場合は、CSS3ボタンジェネレーターを使用することをお勧めします。

結論

黒と白のボタンはシンプルで信頼性があります。黒と白をブランドの色に置き換えて、ウェブサイトに関連するボタンにすばやくアクセスできます。フラットUIボタンはシンプルで、小さなアクションと色を使用して大きなストーリーを伝えます。マテリアルデザインボタンは、大規模な複雑なアクションを使用して、現実世界の影をシミュレートし、それによってユーザーの注意を引き付けます。

このガイドが、CSSの初心者がボタンを非常に強力で創造的にするビルディングブロックを理解するのに役立つことを願っています。

最新のCSSボタン

に関するよくある質問

シンプルなCSSボタンを作成する方法は？

シンプルなCSSボタンの作成には、CSSファイルのクラスを定義し、HTMLファイルのボタン要素に適用することが含まれます。たとえば、.button、background-color、color、border、padding、text-align、text-decoration、display、cursor、.buttonなどの属性を含むCSSファイルの.buttonクラスを定義できます。 >、

、

、および

など。次に、HTMLファイルで、ボタン要素を作成して

クラスを適用できます。これにより、:hoverクラスで定義されているプロパティに応じてボタンがスタイルされます。 :hover

CSSボタンにホバーエフェクトを追加する方法は？

pseudoクラスを使用して、CSSボタンにホバーエフェクトを追加できます。この擬似クラスは、ユーザーポインターがその上に浮かんだときに、要素のスタイルを選択して設定するために使用されます。たとえば、ユーザーのポインターがその上に浮かぶ場合、ボタンクラスの

擬似クラスでこれらのプロパティを定義することにより、ボタンの背景色とテキスト色を変更できます。

アイコンでCSSボタンを作成する方法は？

アイコンを備えたlinear-gradient() CSSボタンは、アイコンフォントまたはSVGアイコンを使用して作成できます。フォントなどのアイコンフォントは、CSSを使用して簡単にスタイルできるさまざまなアイコンを提供します。アイコンフォントを使用するには、HTMLファイルにアイコンフォントのCSSファイルを含め、使用するアイコンの対応するクラスを使用する必要があります。一方、SVGアイコンはHTMLファイルに直接埋め込み、CSSを使用してスタイルを整えることができます。 radial-gradient()

グラデーションでCSSボタンを作成する方法は？

グラデーション付きの

CSSボタンは、

関数またはborder-radius関数を使用して作成できます。これらの関数は、それぞれ線形勾配または放射状勾配を定義するために使用されます。勾配は、勾配が変換する色である2つ以上のカラーストップポイントで定義されます。カラーストップポイントは、グラデーションラインに沿った色と色の位置によって定義されます。 border-radius

丸い角でCSSボタンを作成する方法は？

丸い角を備えた

CSSボタンは、

属性を使用して作成できます。このプロパティは、境界角の半径を定義するために使用されます。 box-shadow属性の値は、ピクセルまたはパーセンテージで指定できます。値が高いと、より丸い角が作成されます。 box-shadow

影付きのCSSボタンを作成する方法は？

css bottons withシャドウは、

属性を使用して作成できます。このプロパティは、要素にシャドウエフェクトを適用するために使用されます。 transitionプロパティは、影の水平オフセット、垂直オフセット、ぼかし半径、拡張半径、色など、複数の値を取得します。 transition

トランジションでCSSボタンを作成する方法は？ cssトランジションを備えたボタンは、属性を使用して作成できます。このプロパティは、ボタンの上にホバリングしたり、ボタンをクリックしたりすると、ユーザーがあるスタイルから別のスタイルに変更する速度を制御するために使用されます。 属性は、変換する属性、変換の持続時間、タイミング関数、遅延など、複数の値を取得します。

アニメーション付きのCSSボタンを作成する方法は？

アニメーション付きの

CSSボタンは、animationプロパティとkeyframesルールを使用して作成できます。 animation属性は、アニメーションの名前、持続時間、タイミング関数、遅延、反復数、充填モード、および再生ステータスを指定するために使用されます。 keyframesルールは、アニメーションの各段階のスタイルを指定するために使用されます。

レスポンシブCSSボタンを作成する方法は？

レスポンシブCSSボタンは、メディアクエリを使用して作成できます。メディアクエリは、さまざまなデバイスまたは画面サイズにさまざまなスタイルを適用するために使用されます。たとえば、幅が600ピクセル未満の画面のボタンのサイズ、塗りつぶし、フォントのサイズを変更するメディアクエリを定義できます。

さまざまな形のCSSボタンを作成する方法は？

異なる形状の

CSSボタンは、

属性とborder-radius属性を使用して作成できます。 transformプロパティは、円形または楕円形のボタンを作成するために使用できます。 border-radiusプロパティは、回転、ズーム、傾斜、またはパンボタンの回転に使用できます。 transform

以上が最新のCSSボタンの基本の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。