CSSで書くフラットデザインで使えるボタンサンプル
![](http://webnohito.me/wp-content/uploads/2017/02/flat-button-sample.jpg)
フラット・セミフラットデザインが流行ってる中、ボタンのデザインやボタンのhover効果のデザインはユーザビリティの観点からもとても大事。
せっかくフラットなんだし、画像はもちろん使いたくないし、jsも使わずにサクサク動く軽いボタンを作りましょう。
今回はhtmlも入れ子にしまくったりしないで済む作りにしてあります。
目次
フラットなボタンのhoverサンプル
まずはよくあるフラットボタンのhoverサンプルから。
もっと動きをつけたhoverサンプル
もっと動きをつけたhoverのサンプル。
やっぱり時代はセミフラット
フラットなボタンもいいけど、時代はセミフラットですよね。
より押せる感を出すことでUIとしてもよりよくなるはず。