近年はサイトのデザインでフラットデザインを取り入れているコーポレートサイトや個人サイトをよく見かけます。
そこでたまに見るのが、上の画像のようなフラットなデザインのボタン。
フレットな感じでありながら、立体的なデザインでもあるため、パッと見でもボタンとなっており、
「これを押したら何かなるのかな？」
と初めて見た人でもわかるようなものになっているのが特徴です。
そこで今回はこのデザインをCSSで表現する方法を紹介したいと思います(^^)
まず、以下のようなボタンをサイトに設置したいとします。
目次
見本コード
このようなデザインのボタンを設置するには、以下のようにaタグに対してCSSを設定してあげます。
a {
background: #3498db;
box-sizing: border-box;
box-shadow: 0 5px #2980b9;
border-radius: 5px;
color: #fff;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
padding: 10px 30px;
text-align: center;
text-decoration: none;
}
a:hover {
box-shadow: none;
transform: translate3d(0,5px,0);
}
box-shadowでボタンを立体的に見せる
aタグに指定してある
box-shadow: 0 5px #2980b9;
こちらで指定した色がボタンの立体部分の色となり、太さがそのまま立体的な部分の幅となります。
box-shadowで対象物に対して影を付けてあげることで立体的にさせている、ということですね！
ボタンにマウスカーソルを乗せた時の表示
続いて、ボタンにマウスカーソルを乗せた時に、ボタンが押されたような表示にさせるために
a:hover {
box-shadow: none;
transform: translate3d(0,5px,0);
}
このようにCSSを設定してあります。
こう設定することでマウスカーソルを乗せた時にボタンがポチっと押されたような表示にさせることができます(^^)
マウスカーソルを乗せた時に、ふわっとボタンが押されたようなアニメーションをつける
上で紹介したCSSですと、マウスカーソルを乗せた時に“カチッ”といった形でボタンが押されたような挙動になります。
（言葉で伝えるの難しいですね。。。）
が、CSSをaタグに別途追加することで、ふわっとボタンが押されたようなアニメーションを実装することもできます！
上の見本ボタンの挙動を見ると、記事冒頭で紹介した見本ボタンと比べて、優しい印象を受けます。
このようなアニメーションを実装するには、以下のようにCSSを設定することで可能になります！
a {
background: #3498db;
box-sizing: border-box;
box-shadow: 0 5px #2980b9;
border-radius: 5px;
color: #fff;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
padding: 10px 30px;
text-align: center;
text-decoration: none;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transition: all .6s cubic-bezier(.19,1.000,.22,1.000);
-webkit-transition: all .6s cubic-bezier(.19,1.000,.22,1.000);
}
a:hover {
box-shadow: none;
transform: translate3d(0,5px,0);
}
上記CSSの13〜17行目にある
transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transition: all .6s cubic-bezier(.19,1.000,.22,1.000); -webkit-transition: all .6s cubic-bezier(.19,1.000,.22,1.000);
この部分がボタンにマウスカーソルを乗せたときにふわっとしたアニメーションを実装するために必要なCSSとなります！
まとめ
このようにaタグにCSSを指定してあげることでフラットなデザインのボタンを設置することができるようになります！
なお、フラットデザインでよく使われている色を知りたいなぁ、という方がいらっしゃいましたら、Flat UI Colorsというサイトにフラットデザインで使われる色が紹介されていますので、コチラを参考にしてみてはいかがでしょうか？
自分も今回見本で使った色はコチラのサイトから色を使わせていただきました(^-^)
