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

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

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

デモのアニメーション

Wipe Hover Effect

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

デモのキャプチャ

How to Create Ghost Buttons With CSS
デモページ

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

デモのキャプチャ

How to Create CSS Ghost Buttons
デモページ

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

デモのキャプチャ

Semi-Transparent Buttons
デモページ

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

デモのアニメーション

Collection of Button Hover Effects

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

デモのアニメーション

Sweet and Simple Buttons

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

デモのアニメーション

8 Simple CSS hover effects

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

sponsors

top of page

©2018 coliss