ホバーで入力欄が出現するオシャレな検索ボックス

MATEREATE INFORMATION

アイコンをホバーすると、横に大きく伸びる演出をし、入力欄が出現する検索ボックスの無料Web素材です。デザインをアイコンのみで表示しているためサイト表示の邪魔になりにくく、必要な時に検索欄を呼び出せる便利な素材でございます。ホバーエフェクトにより少しアクセントの効いた検索ボックスとなっております。

素材の詳細

検索ボックスのエフェクトデザイン
デザイン・エフェクトイメージ

アイコンは「FontAwesome」のアイコンを使用し、丸い形のシンプルなデザインとなっております。マウスホバーで横に伸びるエフェクトがかかります。

検索ボックスのエフェクト終了時のデザイン
エフェクト終了時のデザイン

横に伸びるエフェクトが完了すると、検索ワードの入力欄が表示されます。もちろん文字入力も可能です。