[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ
Post on:2015年1月15日
大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。
シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201501/2015011500.gif)
ワイプのエフェクトを使ったゴーストボタン。デモではテキストはカラーが変わるだけですが、テキスト自体を変更することもできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011502.png)
How to Create Ghost Buttons With CSS
デモページ
<a>ボタン</a>で実装された、7種類のホバーエフェクト伴ったシンプルなボタン。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011503.png)
How to Create CSS Ghost Buttons
デモページ
こちらもゴーストボタンのシンプルな実装例。
8種類のボタンには、半透明やカラー変更など繊細でかっこいいボタンがあります。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011504.png)
Semi-Transparent Buttons
デモページ
ソリッドなラインのゴーストボタンから少し進化した半透明のボタン。薄らと背景の写真画像も見えるので、ベタ塗りのボタンよりデザインが映えます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201501/2015011506.gif)
Collection of Button Hover Effects
きらっと光ったり、バウンドしたり、アウトラインがアニメーションしたりなど、一味違ったアニメーションがたくさんあります。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201501/2015011505.gif)
ぱたっと開いたり、ズームしたり、スライドしたり、シンプルながらかわいいアニメーションのボタン。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201501/2015011507.gif)
シンプルなホバーアニメーションを伴ったボタンコレクション。
sponsors