心理的にクリックを誘発させるボタンデザイン50選#05

「リキッドフロー(波打つ液体背景)」や「レーザースイープ(光線走査)」、「有機的アメーバ変形」など、最先端のUIトレンドを反映した「流体・先進的3DブロックUI」を厳選して50種類紹介します。圧倒的な存在感でコンバージョンを勝ち取るコレクションです。

DESIGN 001
【リキッドフロー】ホバー時に非対称の柔らかい有機的角丸にスムーズに変化するリキッドエフェクト。
DESIGN 002
【レーザースイープ】ホバーした瞬間に上部の細い境界線をグリーンのレーザービームが横切るサイバーUI。
DESIGN 003
【対角フリップ】斜めの軸を中心に3D回転し、裏面に仕込まれた別色のメッセージを表出するデザイン。
DESIGN 004
【クリックリップル】パステルラベンダー。ホバーすると背景色がフワッと薄く変化するフラットで上品なデザイン。
DESIGN 005
【3Dメタルブロック】金属プレートのような美しいスレートグレー。沈み込む操作感を与える3Dソリッドボタン。
DESIGN 006
【サークルカーテン】ホバー時に中央から同心円状に背景が広がり、ボタン全体を優しく塗りつぶすカーテン。
DESIGN 007
【ブレスグロウ】影と本体が、呼吸するようにゆっくり拡大・縮小を繰り返すリラックスしたパルスアニメーション。
DESIGN 008
【スケッチボーダー】通常時は点線。ホバー時にスムーズに実線境界になり、同時に背景色が透けるような水色へ。
DESIGN 009
【テキストネオングロウ】テキストのみ。ホバーした瞬間に文字がネオンのように綺麗にグロウ発光します。
DESIGN 010
【チェッカースクロール】ゴールド調の枠線。ホバー時にふわりと浮き上がり、背景が柔らかいクリーム色になります。
DESIGN 011
【スライドアイコン】ホバーした際に、末尾の矢印「➔」が右方向へスライドして、読者の視線を前進させます。
DESIGN 012
【トリプルフレーム収束】3重の枠線。ホバー時に内外の複数の線がぴたっと重なり合い、1本の太枠を形成します。
DESIGN 013
【サイケデリックウェーブ】パステルグリーンからイエロー、ピンクへとうねるような美しい波状グラデが時計回りに変化。
DESIGN 014
【アンダーラインシェブロン】テキストのみ。ホバー時に細い下線が中央の60%幅のみにシュッと引かれる洗練された設計。
DESIGN 015
【アローループスライド】ホバー時に右の矢印が右端へ滑らかに消えていき、左から再ロードされるループエフェクト。
DESIGN 016
【点線点滅】パステルパープルの丸みを帯びた点線枠。ホバーすると線が繋がり、全体がふわりとラベンダー色に。
DESIGN 017
【シャッター横スプリット】ホバー時に、左右の両端から背景色が中央に向けてスライドして合体し、白抜き文字に変化。
DESIGN 018
【プレストグル】角丸クッション調のトグル。ホバーすると内側に向けて深く沈み込んでトグルオンの操作感。
DESIGN 019
【有機的blob変形】不定形な丸みのある水滴状。ホバーすると滑らかに変形し、完全な丸型(カプセル)へと移行。
DESIGN 020
【鏡面スイープ】明るいブルーの角丸。ホバー時に斜めのクリスタル光沢が一瞬で走り抜ける高品質な質感。
DESIGN 021
【マグネットスケール】パステルコーラル。ホバー時に1.04倍にスムーズに吸い付くように拡大する操作誘導。
DESIGN 022
【回転レインボーボーダー】白インナー。外周の細いレインボーグラデ線がホバーした瞬間にネオン調に輝きます。
DESIGN 023
【グリッドマトリクス】細かな格子ドット背景。ホバー時にわずかに上に移動して上質なフラットシャドウを落とします。
DESIGN 024
【平行四辺形リバース】右に傾いた平行四辺形。ホバー時に文字間隔が自然に広がり、スマートな速度感を引き出します。
DESIGN 025
【L字回転収束】左上と右下のL字の角枠が、ホバーした瞬間に吸い付くように全体をぐるりと囲み込みます。
DESIGN 026
【ミストスイープ】通常時はうっすらと半透明グリーン。ホバー時に一瞬で鮮やかなグリーンへと転換。
DESIGN 027
【GOラインアロー】ピンクカプセル。ホバー時に文字間隔が綺麗に開き、決定力を高めるスタイリッシュな表現。
DESIGN 028
【蛍光ハイライター】通常は境界のないプレーンテキスト。ホバーした瞬間に黄色い蛍光ペンが左から右へ引かれます。
DESIGN 029
【サイドラインエクスパンド】左右の細い縦線。ホバーした瞬間に縦線が上下に伸びて、完全なグリーンの外枠になります。
DESIGN 030
【クッションバウンドプレス】クリック(アクティブ時)に、ボタンが縦方向にぷにっと潰れてバウンドする弾力表現。
DESIGN 031
【ピクセルダスト】通常はマイルドな角丸。ホバーした瞬間に直角の長方形へとスムーズに変形するカチッとした挙動。
DESIGN 032
【ゴールドメタルグロス2】ゴールドカプセル。ホバー時に上部に緻密なハイライトをあしらった、信頼性を高めるボタン。
DESIGN 033
【カーテン上スライド】上部から下部に向けて、カーテンが閉まるように背景色が滑らかにスライド充填されます。
DESIGN 034
【スターシャワー】ゴールド背景。ホバー時に右上から星マークが降ってくるようなユニークな演出です。
DESIGN 035
【内側パルス波紋】カプセルミント。ホバー時に外側からボタンに向けて同心円波紋が収縮して吸い込まれるエフェクト。
DESIGN 036
【ゼリー縦揺れ】ホバーした瞬間に縦方向にプルプルと伸び縮みしてシェイクし、操作時の楽しさを付与。
DESIGN 037
【対角クロスバイカラー】対角線の2色グラデ。境界のスリットがスライドして、全体がパステルピンクに満ちます。
DESIGN 038
【インサイドグロウパルス】インナーネオングロウ。ホバーした瞬間に境界の内側から発光がじんわり染み出します。
DESIGN 039
【バウンスフラッシュ2】ホバー時に上方向に4px浮き上がり、クリックした瞬間に背景が紫一色に染まります。
DESIGN 040
【二色ネオングロウ】黒背景に紫枠。ホバー時に外周がブルー、内周が紫にそれぞれ個別に光る多重ネオン。
DESIGN 041
【オーロラスイフト2】淡いブルーからオレンジへと常に流れながら色が変化し続ける自動変色グラデーション。
DESIGN 042
【トグルニューモルフィズム】通常は凹んでいるインナー影。ホバーすると完全にフラットなボタンに融合します。
DESIGN 043
【下線センタースライド】下部ライン。ホバーした瞬間に中央の1点から左右両端へ向けて滑らかにラインが伸びます。
DESIGN 044
【内側ダッシュ波】内側点線枠。ホバー時にスムーズに実線枠に繋がり、水色の綺麗な背景色が満ちます。
DESIGN 045
【波ウェーブフロー】ピンク背景。ホバー時に底面から逆円弧状のグラデウェーブが滑らかにせり上がります。
DESIGN 046
【逆アローループスライド】左端の「←」が、ホバー時に左端へ向けて滑らかにループスライドして再装填されます。
DESIGN 047
【点線ダッシュ回転】内側枠線。ホバーした瞬間に内側の細い点線が時計回りに回るようにスライドします。
DESIGN 048
【ソフトバンプ2】ホバーした瞬間に、ボタン全体がほんのり奥方向へ引っ込む(0.98倍)ソフトディストーション。
DESIGN 049
【カプセルグロス2】高品位パステルグリーン。宝石のような緻密な3Dハイライトと斜め反射光彩。
DESIGN 050
【クッションバウンス2】パステルパープル。ホバーした瞬間に上方に浮きながら形が少し膨らむような弾性バウンス。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です