かわいいWebをやりたい！
コンピュータが可愛いことをしていると嬉しくなります。
可愛いCSSを書いてボタンを可愛くしてみます。
ソースコード
See the Pen Untitled by mhousetree (@mhousetree) on CodePen.
解説
実際に飛び出す部分を実装しているのは button 要素に対して適応されているスタイルの部分です。
(2つのクラスはそれぞれボタンのデザインと、見やすくするためのレイアウトに使われています)
hover すると、box-shadow が右下に現れつつ、transform: translate で box-shadow の幅の分だけ
ボタン自体を左上に移動させることで、ボタンが左上に飛び出しているように見えます。
可愛いですね。
あとがき
実際の作例はこんな感じです！(友人のイラストレーターさんのWebサイトです)
https://sonokosuzuki.com/
しばらくWebのこと勉強してきたのに記事という形でアウトプットしたことがなかったので、簡単ですが書いてみました。
誰かのお役に立てれば幸いです。