CSSを使用してボタンのスタイルを設定する方法

CSS は Web ページのスタイル デザインに使用される言語で、ボタンのスタイル設定など、多くの興味深い効果を実現できます。この記事では、CSS を使用してボタンのスタイルを設定する方法について説明します。

HTML でのボタンの作成

まず、以下に示すように、HTML ページにボタンを作成します。

<button>我是一个按钮</button>

HTML の <button># がここで使用されます。 ## タグを使用してボタンを作成します。

ボタンの基本スタイルを設定する

次に、CSS を使用して、サイズ、色、フォント、境界線などのボタンの基本スタイルを設定します。

button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 5px;
}

このコードは、すべてのボタンのフォント サイズを 16 ピクセルに設定し、パディングを上下 10 ピクセル、左右 20 ピクセルに設定します。ボタンの背景色は #3f51b5 (濃い青)、前景色は白です。ボタンには枠がなく、角の半径は 5 ピクセルです。

ホバー効果

ボタンにホバー効果を追加することもできます。たとえば、ユーザーがマウス ポインタをボタンの上に置くと、ボタンの背景色が水色に変わります。

button:hover {
  background-color: #2196f3;
}

アクティブ化効果

ボタンをクリックすると、ボタンの背景色の変更などのアクティブ化効果を追加できます:

button:active {
  background-color: #1e88e5;
}

効果を無効にする

ボタンが無効になっている場合、テキストの色や背景色の変更など、ボタンの外観を変更して、ボタンが無効に見えるようにすることができます。

button:disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

このコードは、ボタンの背景色をグレーに、テキストの色を濃いグレーに、ポインターのスタイルを禁止記号に設定します。

結論

Web ページでは、ボタンは非常に一般的な要素であり、CSS を通じて多くの興味深い効果を実現できます。この記事ではCSSを使って基本的なスタイル、ホバー効果、ボタンの有効化効果、無効化効果を設定する方法を紹介します。これらのヒントを使用すると、多くの興味深い動的要素を Web サイトに追加し、ユーザー エクスペリエンスを向上させることができます。

以上がCSSを使用してボタンのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。