AppStoreを感じる影のついたボタン

こんにちは。ささめまです。

線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。

＼ コピペでそのまま使えます ／

demo

button

html

<a href="#" class="button_link">button</a>

css

.button_link {
	width: 280px;
	height: 40px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background-color: #bdefea;
	box-shadow: 0 0 15px rgba(0 0 0 / .2);
	border-radius: 6px;
	display: block;
	transition: 0.5s;
}

.button_link:hover {
	text-decoration: none;
	background-color: #81d8d0;
	box-shadow: 0 0 10px rgba(0 0 0 / 0);
}

design

AppStoreのトップ画面って記事1つ1つにぼわぁぁ〜っとした影がついていて、ポチッとタップできることがわかりますよね。
確かグッドデザイン賞的な何かを受賞していた気がします。

今回ご紹介したのはボタンですが、記事詳細へのリンクにより似合うと思います。

影のぼわぁぁ〜感を大事にしたかったのでtransitionを0.5sにして余韻をたっぷりめにしました。
どこかでお役に立てば嬉しいです。

ではでは。