CSSでボタンをデザインする方法：基本スタイルからアニメーションまで徹底解説

Webサイトをデザインしていると、ボタンを特定の見た目にしたい場面がよくあります。たとえば、他のページ要素とは異なる背景色をボタンに設定して、ユーザーの注意を引きつけたいケースなどが挙げられます。

CSSを使えば、開発者は自由にスタイルを適用したボタンを作成できます。CSSでは、ボタンの色、文字サイズ、境界線（ボーダー）、幅、高さなどを変更することが可能です。

この記事では、実際のコード例とともに、さまざまなCSSプロパティを使ってHTMLボタンをスタイリングする方法を解説します。最後まで読めば、プロのようにCSSでボタンをデザインできるようになるでしょう。

ボタンの基礎知識

HTMLでは、ボタンをいくつかの方法で定義できます。最も一般的なのは<button>タグを使う方法と、<input type="button">要素を使う方法の2つです。どちらも同じ種類のボタンを表示します。

ボタンはHTMLコードで定義します。何もスタイルを適用していない状態のHTMLボタンは以下のような見た目になります。

このボタンに使用したコードは以下の通りです。

<button>クリック</button>

このボタンはHTMLのデフォルトスタイルを使用しているため、現状ではかなり無地な見た目になっています。

ボタンをスタイリングする――つまりページ上での見た目をカスタマイズする――には、CSSを使う必要があります。この記事では、ボタンに対して以下の操作を行う方法を紹介します。

• 背景色の変更
• 文字色の変更
• 文字サイズの変更
• パディング（余白）の追加
• 角丸の設定
• 色付きボーダーの追加
• :hoverセレクターの活用
• シャドウ（影）の追加
• 幅の変更
• ボタンの無効化
• アニメーションの追加

さらに、横並びと縦並びのボタングループの作成方法についても解説します。

背景色の変更

ボタンをデザインする際、最初に行いたいのが背景色の設定かもしれません。デフォルトのボタンは白背景に黒文字です。CSSのbackground-colorプロパティを使えば、ボタンの背景色を変更できます。

たとえば、ピンクの背景を持つボタンを作りたいとしましょう。次のCSSコードでボタンの色を変更できます。

index.html

<button class="button">クリック</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	background-color: pink;
}

実行結果：

background-colorプロパティにより、ボタンの背景色をピンクに変更できました。このプロパティを使えば、任意の色を背景に指定できます。

文字色の変更

ボタンの文字色を変更するには、colorプロパティを使用します。ピンクの背景に緑の文字を持つボタンを作りたい場合は、次のコードを使います。

index.html

<button class="button">クリック</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	color: green;
	background-color: pink;
}

実行結果：

このコードでは、color: green;プロパティによってボタン内のテキストが緑色に設定されています。

文字サイズの変更

CSSのfont-sizeプロパティを使うと、ボタン内のテキストサイズを指定できます。フォントサイズを20pxにしたい場合は、次のコードを使用します。

index.html

<button class="button">クリック</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
	font-size: 20px;
}

実行結果：

ボタン自体のサイズは変わりませんが、内部のフォントサイズが20pxになりました。font-size属性でボタン内テキストの大きさを設定しています。

パディング（内側の余白）

ボタンをデザインする際、ボタン内のテキストと外枠との間に一定の余白を持たせたいことがあります。その場合に使うのがpaddingプロパティです。

paddingプロパティは、長さの単位（px、emなど）またはパーセント値を使って、ボタンのテキストとボーダー間のスペースを定義します。

たとえば、20pxのパディングを持つボタンと40pxのパディングを持つボタンの2つを作成してみましょう。

index.html

<button class="button1">クリック</button>
<button class="button2">クリック</button>

styles.css

.button1 {
	padding: 20px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

.button2 {
	padding: 40px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

実行結果：

1つ目のボタンはテキストとボーダーの間に20pxの余白があり、2つ目のボタンには40pxの余白があります。パディングのための十分なスペースを確保するため、これらのボタンではwidthやheight属性を指定していません（これらの属性については後述します）。

角丸の設定

デフォルトのHTMLボタンは四角い角を持っています。しかし、角を丸くしたい場合もあるでしょう。

border-radiusプロパティを使えば、角が丸くなったボタンを作成できます。以下はborder-radiusの使用例3つです。それぞれ異なる半径の値を使って、効果の違いを示しています。

index.html

<button class="button1">クリック</button>
<button class="button2">クリック</button>
<button class="button3">クリック</button>

styles.css

.button1 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
	border-radius: 5px;
}

.button2 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
	border-radius: 10px;
}

.button3 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
	border-radius: 15px;
}

実行結果：

この例では3つのボタンを作成しました。border-radiusの値が大きいほど、ボタンの角はより丸くなります。

ボーダー（境界線）の色

CSSのborderプロパティを使えば、ボタンに任意の色のボーダーを追加できます。

たとえば、ボタンの境界線をユーザーにわかりやすくするために、色付きのボーダーを持つボタンを作りたいとしましょう。次のコードで作成できます。

index.html

<button class="button">クリック</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1; /* ライトピンク */
	padding: 25px;
}

実行結果：

このボタンは白背景・黒文字で、全方向に25pxのパディングが設定されています。borderプロパティで幅3pxの実線ボーダーを作成し、その色をライトピンクの16進数カラーコードである#ffb6c1に設定しました。

borderプロパティについてさらに詳しく学びたい方は、CSS borderプロパティに関する解説記事も参考にしてください。

ホバー効果（:hover）

CSSの:hoverセレクターを使うと、ユーザーがカーソルをボタンに重ねたときにスタイルを変化させられます。

たとえば、黒文字・白背景のボタンがあり、ホバー時に文字色を白へ、背景色を緑へ変えたいとします。次のコードで実現できます。

index.html

<button class="button">クリック</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
}

.button:hover {
	background-color: green;
	color: white;
}

実行結果：

上の図の左側は、マウスカーソルが重なっていない状態のボタンです。黒文字・ピンクのボーダー・25pxのパディングを持つ白いボタンが表示され、これがボタンのデフォルト状態です。一方、ユーザーがボタンにカーソルを重ねると、背景色が緑に、文字色が白に変化します。

ユーザーのカーソルがボタンから離れると、ボタンはすぐにデフォルト状態へ戻ります。

また、transition-duration属性を使えば、ホバー後のスタイル変化にかかる時間を指定することも可能です。先ほどのボタンの変化に1秒かけるには、次のコードを追加します。

.button {
	…
	transition-duration: 1s;
}

これで、ユーザーがボタンにホバーすると、1秒かけてスタイルが変化するようになります。CSSトランジションについては、初心者向けガイドもぜひ参考にしてください。

シャドウ（影）の追加

CSSのbox-shadowプロパティを使うと、ボタンに影を付けられます。box-shadowプロパティは複数のパラメータを受け取ります。詳細はCSS box-shadowチュートリアルをご覧ください。

ここでは、ドロップシャドウ付きのボタンを作成してみましょう。次のコードを使用します。

index.html

<button class="button">クリック</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}

実行結果：

この例ではボタンに影を追加しました。指定したパラメータの内容は以下の通りです。

• X方向のオフセットは0：影がボタンの真下に表示される
• Y方向のオフセットは10px：影がボタンの下に10px伸びる
• ぼかし半径は10px：影にぼかし効果がかかる
• 広がり半径は0：ぼかしの周囲に広がりがない
• 影の色はrgba(0,0,0,0.2)：薄いグレー

上記の実行結果の通り、これらすべてのプロパティが適用されたボタンが表示されます。

幅の指定

widthプロパティでボタンの幅を定義できます。デフォルトではボタンのサイズはテキストコンテンツに基づきますが、widthプロパティを使えばデフォルトを上書きして特定の幅を設定できます。

以下は、異なる幅を持つ3つのボタンの例です。

index.html

<button class="button1">クリック</button>
<button class="button2">クリック</button>
<button class="button3">クリック</button>

styles.css

.button1 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 250px;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 50%;
}

.button3 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 100%;
}

実行結果：

この例では、異なる幅を持つ3つのボタンを作成しました。

ボタンの無効化

ボタンをデザインする際、ページ上には表示したまま無効化したい場合があるかもしれません。たとえば、ユーザーがフォームの全項目を入力するまでボタンを無効にしておきたいケースなどです。

opacityプロパティとcursorプロパティを組み合わせると、無効化されたボタンを作成できます。opacityプロパティはボタンに透明度を加え、無効に見えるようにします。デフォルトのopacity値は1で、透明度なしで表示されます。詳しくはCSS opacityのガイドをご覧ください。

cursorプロパティに「not-allowed」の値を設定すると、ボタンが無効化されます。ユーザーがこの値が設定されたボタンにホバーすると、カーソルが禁止マークに変わります。

通常のボタンと無効化されたボタンのコード比較は以下の通りです。

index.html

<button class="button1">クリック</button>
<button class="button2">クリック</button>

styles.css

.button1 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
}

.button2 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
	border: none;
	opacity: 0.5;
	cursor: not-allowed;
}

実行結果：

両方のボタンはピンク（#ffb6c1）の背景を持っています。1つ目のボタンは完全に不透明で、機能する通常のボタンです。2つ目のボタンはopacityプロパティが0.5に、cursorプロパティがnot-allowedに設定されており、より透明で機能しない（無効化された）ボタンになっています。

ボタングループの作成

サイト開発では、複数のボタンをグループ化したい場合があります。たとえばフォームをデザインする際、「保存」「戻る」「次へ」の3つのボタンからなるボタングループを設置したいこともあるでしょう。

横並びのボタングループ

ボタンを横に並べて表示したい場合は、CSSボタングループを作成します。グループに含めたいボタンにfloat: left;を指定することで実現できます。floatプロパティの詳細はCSS floatのガイドをご覧ください。横並びボタングループのコード例は以下の通りです。

index.html

<button class="button">クリック</button>
<button class="button">クリック</button>
<button class="button">クリック</button>

styles.css

.button {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
	border: none;
	float: left;
}

実行結果：

ご覧の通り、3つのボタンが横に並んで表示されます。

同様に、borderプロパティを指定すれば、それぞれに個別のボーダーを持つボタングループも作成できます。

index.html

<button class="button">クリック</button>
<button class="button">クリック</button>
<button class="button">クリック</button>

styles.css

.button {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
	border: 2px solid blue;
	float: left;
}

実行結果：

このコードでは、各ボタンに幅2pxの青い実線ボーダーを指定しました。これにより、グループ内の各ボタンを視覚的に区別できるようになります。

縦並びのボタングループ

ボタングループをデザインする際、ボタンを縦に並べたいことも多いでしょう。その場合に使うのがdisplay: block;というCSSプロパティです。

display: blockを使ってボタンを縦に表示する例は以下の通りです。

index.html

<button class="button">クリック</button>
<button class="button">クリック</button>
<button class="button">クリック</button>

styles.css

.button {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
	border: 2px solid blue;
	display: block;
}

実行結果：

ブラウザはこれらのボタンをひとまとまりとして認識し、縦方向に表示します。

ボタンのアニメーション

ボタンをデザインする際、アニメーションを加えてインタラクティブ性を高めたくなることもあるでしょう。ここでは、CSSでボタンにアニメーションを適用するいくつかの方法を紹介します。

押下エフェクト

CSSでは、ユーザーがクリックしたときにボタンが押し込まれたように見えるエフェクトを作成できます。

たとえば、ライトブルーのボタンにダークグレーのシャドウを付けておき、クリックから0.5秒後にライトピンク＋ライトグレーのシャドウに変化させたいとしましょう。これにより、ユーザーは物理的にボタンを押している感覚を得られます。実現するコードは以下の通りです。

index.html

<button class="button">クリック</button>

styles.css

.button {
	padding: 20px;
	font-size: 15px;
	color: white;
	background-color: lightblue;
	border: none;
	transition-duration: 0.5s;
	border-radius: 8px;
	box-shadow: 0 5px gray;
}

.button:active {
	background-color: #ffb6c1;
	box-shadow: 0 5px lightgray;
	transform: translateY(5px);
}

実行結果：

左側がクリック前のボタンで、ライトブルーにダークグレーのbox-shadowが付いています。右側がクリック後（指定したトランジション時間の経過後）のボタンで、ピンクの背景とライトグレーのbox-shadowに変化しています。

コードの内容を分解して見てみましょう。.buttonスタイルでは以下の設定を行っています。

• ボタンの周囲に20pxのパディングを設定
• ボタンテキストのフォントサイズを15pxに設定
• ボタンテキストの色を白に設定
• ボタンの色をライトブルーに設定
• デフォルトのボーダーを削除
• トランジションの継続時間を0.5秒に設定
• border-radiusを8pxに設定し、角丸を実現
• ボタンの下に5pxのグレーのbox-shadowを設定

これらは、ユーザーがボタンに触れていないときのスタイルです。一方、.button:activeスタイルでは以下の設定を行っています。

• ボタンの背景色をライトピンクに変更
• ボタンの下に5pxのライトグレーのシャドウを設定
• translateY()変換を設定し、ボタンが押されたように見せる

これらのスタイルにより、ユーザーがクリックした瞬間に発動するエフェクトを実現できます。

フェードイン効果

transitionプロパティとopacityプロパティを組み合わせると、ボタンにフェードイン効果を付けられます。:hoverセレクターと組み合わせれば、ユーザーがオブジェクト（ここではボタン）にホバーしたときにフェードイン効果が発動します。

フェードインするボタンのコード例は以下の通りです。

.button {
	padding: 20px;
	font-size: 15px;
	color: white;
	background-color: lightblue;
	border: none;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	border-radius: 8px;
	opacity: 0.7;
}

.button:hover {
	opacity: 1;
}

実行結果：

左側のボタンはやや透過して見えます。これはopacityプロパティを0.7に設定しているためです。

ユーザーがボタンにホバーすると、.button:hoverのCSSが読み込まれ、ボタンの不透明度が1に設定されます。これにより、ボタンは完全に不透明（透過なし）になります。

まとめ

HTMLはWebページ上のボタンの構造を定義します。ボタンを定義したら、CSSを使ってニーズに合わせて自由にカスタマイズできます。

この記事では、人気の高いCSSプロパティを使ってボタンをスタイリングする方法を、実例とともに解説しました。これであなたも、プロのWeb開発者のようにCSSでボタンをデザインできるはずです！