CSSボタンの作り方

ボタンの基本的なスタイル: 最初に、基本的なスタイルを持つシンプルなボタンを作成します。以下のコードは、ボタンの背景色、テキストの色、フォントサイズなどの基本的なスタイルを設定する例です。

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
}

マウスオーバー時のスタイル変更: 次に、マウスオーバー時にボタンのスタイルを変更する方法を見てみましょう。以下のコードは、ボタンにマウスが乗った時に背景色とテキストの色が変わる効果を追加する例です。

.button:hover {
  background-color: #45a049;
  color: white;
}

クリック時のスタイル変更: さらに、ボタンがクリックされた時にスタイルを変更する方法もあります。以下のコードは、ボタンがクリックされた時に背景色が変わる効果を追加する例です。

.button:active {
  background-color: #3e8e41;
  color: white;
}

さまざまなスタイルのボタン: さまざまなスタイルのボタンを作成するためには、CSSのクラスを使用することができます。以下のコードは、異なるスタイルのボタンを作成するためのクラスの例です。

.button.primary {
  background-color: #4CAF50;
  color: white;
}
.button.secondary {
  background-color: #008CBA;
  color: white;
}
.button.success {
  background-color: #4CAF50;
  color: white;
}
.button.danger {
  background-color: #f44336;
  color: white;
}

以上のように、CSSを使用してさまざまなスタイルのボタンを作成することができます。これらの例を参考にしながら、ウェブサイトやアプリケーションに最適なボタンスタイルを作成してください。