- インラインスタイル: ボタンに直接スタイルを適用する方法です。以下の例では、ボタンの背景色を赤に設定しています。
<button style="background-color: red;">ボタン</button>
- CSSクラス: CSSクラスを使用してボタンにスタイルを適用する方法です。まず、CSSでクラスを定義します。
<style>
.red-button {
background-color: red;
}
</style>
次に、ボタンにそのクラスを適用します。
<button class="red-button">ボタン</button>
- CSSの外部ファイル: CSSを外部ファイルに分離して管理する方法もあります。まず、新しいCSSファイル(例:styles.css)を作成し、スタイルを定義します。
.red-button {
background-color: red;
}
次に、HTMLファイルでそのCSSファイルを読み込みます。
<link rel="stylesheet" href="styles.css">
最後に、ボタンにクラスを適用します。
<button class="red-button">ボタン</button>
これらはいくつかの基本的なボタンスタイルの例です。他にもさまざまなスタイルオプションがあります。必要に応じて、背景色、テキストスタイル、ホバーエフェクトなどをカスタマイズすることができます。