フラット・セミフラットデザインが流行ってる中、ボタンのデザインやボタンのhover効果のデザインはユーザビリティの観点からもとても大事。 せっかくフラットなんだし、画像はもちろん使いたくないし、jsも使わずにサクサク動く軽いボタンを作りましょう。 今回はhtmlも入れ子にしまくったりしないで済む作りにしてあります。 目次フラットなボタンのhoverサンプルもっと動きをつけたhoverサンプルやっぱり時代はセミフラットフラットなボタンのhoverサンプルまずはよくあるフラットボタンのhoverサンプルから。 もっと動きをつけたhoverサンプルもっと動きをつけたhoverのサンプル。 やっぱり時代はセミフラットフラットなボタンもいいけど、時代はセミフラットですよね。 より押せる感を出すことでUIとしてもよりよくなるはず。
![CSSで書くフラットデザインで使えるボタンサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/0840549162d4a66e57fb4bbab8100d0c3c8cd926/height=288;version=1;width=512/http%3A%2F%2Fwebnohito.me%2Fwp-content%2Fuploads%2F2017%2F02%2Fflat-button-sample.jpg)