CSS中央寄せボタンの作り方と応用例｜初心者向け詳しい徹底解説とサンプルコード

はじめに
●CSS中央寄せボタンの作り方
- ○方法1：text-alignを使った中央寄せ
- ○方法2：marginを使った中央寄せ
●CSS中央寄せボタンの応用例
- ○応用例1：ボタンの背景色を変える
- ○応用例2：ホバー時のアニメーションを追加する
まとめ

はじめに

CSSを使って中央寄せのボタンを作る方法を知っておくと、Webページのデザインをより美しく仕上げることができます。

また、Webサイトのボタンはユーザーが最もよく触れる要素の1つであり、使い勝手の良さは非常に重要です。

この記事では、初心者でも分かりやすいサンプルコードを交えながら、CSS中央寄せボタンの作り方と応用例について詳しく解説します。

●CSS中央寄せボタンの作り方

CSS中央寄せボタンを作る方法はいくつかありますが、ここでは代表的な2つの方法を紹介します。

○方法1：text-alignを使った中央寄せ

まずは、text-alignを使った中央寄せの方法を紹介します。

下記のHTMLとCSSを使って、ボタンを中央に寄せることができます。

<button class="center-btn">ボタン</button>

.center-btn {
  text-align: center;
}

このように、ボタンのクラスにtext-align: center;を指定することで、ボタンを中央に寄せることができます。

○方法2：marginを使った中央寄せ

次に、marginを使った中央寄せの方法を紹介します。

下記のHTMLとCSSを使って、ボタンを中央に寄せることができます。

<button class="center-btn">ボタン</button>

.center-btn {
  display: block;
  margin: 0 auto;
}

このように、ボタンのクラスにdisplay: block;とmargin: 0 auto;を指定することで、ボタンを中央に寄せることができます。

●CSS中央寄せボタンの応用例

CSSを活用してボタンを中央寄せする方法は、ウェブデザインにおいて非常に役立つテクニックです。

ここでは、基本的な中央寄せボタンの作成方法に加えて、その応用例をいくつか紹介します。

これらの応用例を通じて、ウェブページのデザインをより魅力的でユーザーフレンドリーにする方法を探求していきましょう。

○応用例1：ボタンの背景色を変える

ボタンの背景色を変えることで、より鮮やかな印象を与えることができます。

次のように、CSSのbackground-colorプロパティを使って、ボタンの背景色を変更することができます。

<button class="center-btn blue-btn">ボタン</button>

.center-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  background-color: #333;
  border: none;
}

.blue-btn {
  background-color: #00f;
}

このように、ボタンのクラスにbackground-colorプロパティを追加することで、背景色を変更することができます。

また、ボタンのデザインを整えるために、padding、border-radius、color、borderなどのプロパティも指定しています。

○応用例2：ホバー時のアニメーションを追加する

ボタンにマウスを重ねた時に、アニメーションを追加することで、よりインパクトのあるデザインを実現することができます。

次のように、CSSの:hover疑似クラスを使って、ホバー時のアニメーションを追加することができます。

<button class="center-btn blue-btn hover-btn">ボタン</button>

.center-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  background-color: #333;
  border: none;
}

.blue-btn {
  background-color: #00f;
}

.hover-btn:hover {
  background-color: #f00;
}

このように、ボタンのクラスに:hover疑似クラスを追加することで、ホバー時の背景色を変更することができます。

また、ホバー時のアニメーションを追加するために、background-colorプロパティを変更しています。