透けるような透明ボタンのアニメーション 6選
透けるボタンが今のトレンド？！
サイトの中にあるボタンは訪問者にたくさん押してもらうために、見つけやすいデザインにすることが多いと思います。
最近のWEBサイトでは背景に色をつけたり、他のサイトと差別化するようなデザインが増えてきました。
従来は見やすさ重視のサイトが多かったので、白背景が主流で、コンテンツを区別するために一部にの背景に色をつける程度でした。
グラデーションや淡い色が流行ったこともあり、背景全体に色をつけて文字を白くしたりボタンを透明にするサイトをよく見かけるようになりました。
広告や商品のイメージに合わせて世界観を作り込みたい時には使える手法なので、一度は取り入れてみてもいいかもしれません。
透明ボタンを作ったことがない方もコピペして一緒に設置してみましょう。
よく読まれている記事
背景が透けるような透明ボタン
背景に透けて見えるようなシンプルな透明ボタンのアニメーションです。
背景を薄い色にしている代わりに、テキストは見やすいように透過度を0にしています。
スタンダードな透過ボタンなので、どんな色の背景でも使いやすいと思います。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
枠が光ったような透明ボタン
枠の内側が光ったように見えるような透明ボタンのアニメーションです。
box-shadowで内側に白い色を入れることで、上下できれいなグラデーションを作ることができます。
box-shadowの色を別の色に変えてみてもいいと思います。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
透けた外枠がついた透明ボタン
ボタンの外側に透けた太い枠がついたような透明ボタンのアニメーションです。
マウスオーバーした時には、ボタンの枠が奥に押したようなデザインにしてみました。
このボタンは背景色がどんな色でも設置することができるので、一度は使ってみたいですね。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
背景が透けた横ストライプのような透明ボタン
ボタンの背景に透けたストライプ模様をつけたような透明ボタンのアニメーションです。
他ではあまり見かけないような珍しいデザインですが、cssのみで簡単に作ることができます。
この実装のように、マウスオーバーした時に色を反転させてみても面白いですね。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
枠と文字が浮いて背景が透けたような透明ボタン
ボタンの枠とテキストが浮いて透けるような透明ボタンのアニメーションです。
影を少し離れた位置に作ることで、立体的で空中に浮いたように見せることができます。
マウスオーバーすると、影のテキストが前に出てきて遊び心のあるデザインにしてみました。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
背景に溶け込んだような透明ボタン
背景に埋め込まれて溶け込んだような透明ボタンのアニメーションです。
ボタンの内側に薄く影をいれることで背景に埋もれたようなボタンを作ることができます。
これもbox-shadowをうまく活用して簡単に作れるので、初心者にもおすすめです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は透明ボタンについていくつかご紹介してきましたが、使ってみたいデザインはありましたでしょうか。
ご紹介したように、透明ボタンを使うときには基本的に背景に白以外の色がついているときに使ってみてください。
ページ全体の背景が白い場合でも、目立たせたいコンテンツ部分に背景をつけて透明ボタンを設置してもおしゃれそうですね。
透明ボタンで少し注意していただきたいのは、透過度を上げすぎないようにして中のテキストは読めるようにすることです。
あくまでボタンは訪問者に押して欲しいものなので、見た目と用途のバランスに注意して作ってみましょう。
最後までご覧いただきありがとうございました☆彡