こんにちは。ささめまです。
線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。
＼ コピペでそのまま使えます ／
demo
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にして余韻をたっぷりめにしました。
どこかでお役に立てば嬉しいです。
ではでは。
