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