こんにちは、音ゲーマーのKenです。

今回はCSSを使ったアニメーション付きボタンの作り方をご紹介します。

CSS3で触るとふわっと変化するボタン_画像8

ちょっとした動きで全体の印象がガラリと変わるので、是非お試し下さい！

DEMO

icon-check ベースHTML

ボタン

このHTMLをベースにしてスタイルを設定していきます。
とりあえず表示するとこんな感じ。みすぼらしいですね。

CSS3で触るとふわっと変化するボタン_画像1

icon-check ボタンのサイズを決める

.button{
	color: blue;
	display: inline-block;
	width: 80px;
	height: 80px;
	border: solid 1px #888;
}

widthとheightを指定してサイズを決めましょう。今回は80px*80pxのボタンにしました。
注意として、aタグはインライン要素なので、そのままではサイズが変更できません。
display: inline-blockを併用することで指定できるようになります。

CSS3で触るとふわっと変化するボタン_画像2

icon-check 文字のスタイルを設定する

.button{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: solid 1px #888;
	color: black;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
}

どんどん行きましょう。
リンクの下線と色がちょっと邪魔ですね。スタイルを指定して普通の文字に戻します。
また、text-align: center; と line-height: 80px; を設定することで上下左右中央に配置します。
line-heightとheightを同じ値にするのが重要です。

CSS3で触るとふわっと変化するボタン_画像3

icon-check 文字のスタイルを設定する

.button{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: solid 1px #888;
	color: black;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
	background-color: #fcc;
	border-radius: 16px;
}

background-color: #fcc; でボタンの色をピンクに設定しました。
border-radius: 16px; は角の丸みを設定するプロパティです。
値を変えると丸みも変わるので、設置する場所に合わせて調整できます。
ようやくボタンっぽくなりました。

CSS3で触るとふわっと変化するボタン_画像4

icon-check マウスでさわった時のスタイルを設定する

.button{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: solid 1px #888;
	color: black;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
	background-color: #fcc;
	border-radius: 16px;
	transition: 400ms;
}
.button:hover{
	background-color: #fdd;
}

いよいよです。
:hover擬似クラスを使って、マウスが乗った状態のスタイルを指定します。
background-color: #fdd; としてちょっとだけ白っぽい色に指定しました。
さらに、transition: 400ms;を設定することで、400ミリ秒かけて色が変化するようにします。
これで、「さわるとふわっと変化するボタン」完成です！

CSS3で触るとふわっと変化するボタン_画像5

icon-check 立体感を出す

.button{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: solid 1px #888;
	color: black;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
	background-color: #fcc;
	border-radius: 16px;
	transition: 400ms;
	box-shadow: inset 0 -2px 2px rgba(0,0,0, 0.5);
}
.button:hover{
	background-color: #fdd;
}

…ちょっと物足りないので、もう少し遊んでみましょう。
box-shadowを設定してボタンに影を付けます。
ボタンが立体的になり、”押せそう感”が高まりました。

CSS3で触るとふわっと変化するボタン_画像6

icon-check クリックするとへこむようにする

.button{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: solid 1px #888;
	color: black;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
	background-color: #fcc;
	border-radius: 16px;
	transition: 400ms;
	box-shadow: inset 0 -2px 2px rgba(0,0,0, 0.5);
}
.button:hover{
	background-color: #fdd;
}
.button:active{
	box-shadow: none;
	margin-top: 2px;
	height: 78px;
	transition: none;
}

もっとボタンらしくなるように、クリックした時に見た目が変化するようにします。
:active擬似クラスにスタイルを設定することでクリック時の見た目を変更できます。
クリック時に影を無くし、表示位置を下に2pxずらすことでへこんだ感じを表現しました。
さらに、クリック時にのみtransition:none;を指定しています。

CSS3で触るとふわっと変化するボタン_画像7

これによって、クリックした時は即座にへこみ、離すとじわじわ元に戻るようになります。
なんとなく、押すのが楽しいボタンになりました。

DEMO

いかがでしたでしょうか？
ボタンの大きさや色は簡単に変更できるので、汎用性のあるボタンが作れると思います。
楽しいアニメーション付きのボタンで、Webサイトに少し彩りを加えてみてはいかがでしょう？

それでは。

TOP
TOP