CSSで書くフラットデザインで使えるボタンサンプル

フラット・セミフラットデザインが流行ってる中、ボタンのデザインやボタンのhover効果のデザインはユーザビリティの観点からもとても大事。

せっかくフラットなんだし、画像はもちろん使いたくないし、jsも使わずにサクサク動く軽いボタンを作りましょう。
今回はhtmlも入れ子にしまくったりしないで済む作りにしてあります。

目次

フラットなボタンのhoverサンプル

まずはよくあるフラットボタンのhoverサンプルから。

もっと動きをつけたhoverサンプル

もっと動きをつけたhoverのサンプル。

やっぱり時代はセミフラット

フラットなボタンもいいけど、時代はセミフラットですよね。
より押せる感を出すことでUIとしてもよりよくなるはず。