近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトを、CodePenで公開されている中から紹介します。 そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。 紹介しているものはホバーやクリック時のエフェクトが主になるので確認はPC推奨です。 CSS-only super tilt button よく見るクリックすると押し込まれるような見た目になるボタンにさらに手を加えたタイプで、クリックした位置によって押し込まれる部分が変わります。 実装はすべてCSSでされており、具体的にはまずボタンの中に複数のspan要素を配置し、それぞれクリックされた際にテキストや背景の部分をCSSのtran
![ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/49780cd37a8400f505adae33b8adc5e9fe3ee3b3/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fbutton-hover-and-click-unique-effect-examples.png)