こんにちは、けーすけです！
福岡はすっごい暑いです、本当に冬が恋しい。。。

今回はCSSのみで簡単に立体的なボタンを作成していきたいと思います。とっても簡単にできるので、ボタンを目立たせたい時などに使ってみてください。それでは行ってみましょう！

今回使うHTML

今回使うHTMLがこちら、とってもシンプルですね。しれっとajsaiのリンクを入れておきました。

<p class="btn"><a href="https://ajsai.jp/" target="_blank">BUTTON</a></p>

そしてボタンの見た目のCSSはこのようになっています。

.btn{
	a{
		display: block;
		padding: 20px 30px;
		border-radius: 10px;
		font-style: 20px;
		font-weight: bold;
		letter-spacing: 0.1em;
		text-align: center;
		background: #b14ee4;
		display: block;
		color: #fff;
		text-decoration: none;
		position: relative;
		box-shadow: 0px 5px 0px #9321ce;
		&:hover{
			top: 3px;
			box-shadow: 0px 2px 0px #9321ce;
		}
	}
}

立体的に見えるCSSのコツ

一番肝心な部分が、立体的に見えるかどうかです。
Webサイトは平面なので、少しテクニックを使って立体に見せることがとっても大切。

そこで今回使うのが、「box-shadow」です。box-shadowは要素に影をつける時に使うプロパティですが、こちらに色をつけてボタンに高さがあるように見せます。この部分。

.btn{
	a{
		box-shadow: 0px 5px 0px #9321ce;
	}
}

ホバーの動きをつける

そして、ボタンの挙動をつけます。
ホバーするとボタンが凹んで、ホバーしてるよ！ということがわかるようにします。

まずは、ホバーした時のbox-shadowプロパティの値を小さくします。これでボタンの高さが低くなります。
そこにpositionを使ってボタンの位置をずらします。具体的にはこの部分。

.btn{
	a{
		/* 位置をすらすためにrelativeを指定 */
		position: relative;
		box-shadow: 0px 5px 0px #9321ce;
		&:hover{
		/* box-shadowを減らした分、位置をずらす */
			top: 3px;
			box-shadow: 0px 2px 0px #9321ce;
		}
	}
}

とっても簡単ですね。これができると、ボタンをクリックした時に凹ませることもできますので是非仕組みを理解してみてください。

そして完成品がこちらになります。

[codepen_embed height=”215″ theme_id=”0″ slug_hash=”VzLqPJ” default_tab=”result” user=”Chankei”]See the Pen CSS 3D BUTTON by Chankei (@Chankei) on CodePen.[/codepen_embed]

まとめ

いかがでしょうか。とても簡単なのに、結構使い勝手の良いテクニックだと思います。
あとは、ボタンの色に対して影の色のCSSをうまく調整することでとてもボタンらしく見えると思います。

それではまた次回の記事でお会いしましょう。今回はこの辺で、けーすけでした。