[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ

Post on:2015年1月15日

sponsors

大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。

シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。

ワイプのエフェクトを使ったゴーストボタン。デモではテキストはカラーが変わるだけですが、テキスト自体を変更することもできます。

<a>ボタン</a>で実装された、7種類のホバーエフェクト伴ったシンプルなボタン。

こちらもゴーストボタンのシンプルな実装例。
8種類のボタンには、半透明やカラー変更など繊細でかっこいいボタンがあります。

ソリッドなラインのゴーストボタンから少し進化した半透明のボタン。薄らと背景の写真画像も見えるので、ベタ塗りのボタンよりデザインが映えます。

きらっと光ったり、バウンドしたり、アウトラインがアニメーションしたりなど、一味違ったアニメーションがたくさんあります。

ぱたっと開いたり、ズームしたり、スライドしたり、シンプルながらかわいいアニメーションのボタン。

シンプルなホバーアニメーションを伴ったボタンコレクション。