アニメーションCSSが流行り、ボタンなどのデザインも当たり前に動くデザインが多くなってきました。
ボタンの用途はコンバージョン目的だったり、他ページへの遷移だったり、目的は様々ですが基本的には「押させる」というのが一番大きな目的かと思います。
押させるためには、やはりひときわ目立つデザインにする必要がありますよね。
そこで本日はロールオーバーで動く、CSSのみで作るオシャレかつ、実用性の高いボタンデザインをご紹介します。
ぜひ活用してみてください。
目次
アニメーションレインボーボタン
See the Pen Animated Rainbow Button by lemmin (@lemmin) on CodePen.
汎用性高め！マテリアルフラットデザイン風ボタン
See the Pen Material Flat Button by Yannick Bisaillon (@bisaillonyannick) on CodePen.
ホバーで光る！目立つボタン
See the Pen Flat & Shiny Button (hover effect) by Nathaniel Watson (@nw) on CodePen.
多重レイヤーボタン
See the Pen Flat Layered Button by Dronca Raul (@rauldronca) on CodePen.
3Dフリップボタン
See the Pen Pure CSS 3D flip buttons by Josh Shor (@jshor) on CodePen.
ロールオーバーで動く！フラットデザインボタン
See the Pen Shiny button by Antonio (@conlaccento) on CodePen.
フラットデザイン風アニメーションボタン
See the Pen Flat Buttons by Benjamin Vilina (@BenjaminVilina) on CodePen.
マテリアルデザイン風アニメーションボタン
See the Pen Material Design Flat Button by Andrew (@andrewerrico) on CodePen.
フラットデザイン風ストライプボタン
See the Pen Flat Buttons’ Psuedo Striped Shadows by Daniel Powell (@bloom-dan) on CodePen.
クールなアニメーションボタン
See the Pen Animated Ghost Button by Cameron (@numerical) on CodePen.
アニメーション＆カラーバリエーション豊富！アニメーションボタン
See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.
12種類のアニメーションが設定出来るボタンCSS
See the Pen 12 fancy buttons by bartekd (@bartekd) on CodePen.
シャドウ付き3Dフラットデザインボタン
See the Pen Animated Flat Design Button by Allison Skinner (@adskinner) on CodePen.
