ウェブサイトやランディングページ（LP）の成果率（CVR）を高めるための基本となる「王道の丸ボタン・立体ボタン」を中心に、オーソドックスかつ確実なクリックを誘発するデザインを厳選して50種類紹介します。どのようなサイトのトンマナにも馴染みやすい万能なデザイン集です。CSSコードとHTMLコードをコピペするだけで瞬時に実装可能です。
脳に「押してみよう」とダイレクトに働きかける、心理学を応用して作られたボタンデザインを集めてみました。
サイトデザインの参考にしてください。
DESIGN 001
鮮やかな青のグラデーションに、浮かび上がるような影を重ねることでスマホの画面内で圧倒的な主役感を演出。
DESIGN 002
高級感溢れる漆黒ベース。押した時にボタンスイッチが沈み込むギミックでクリック時の快感を高めた仕様。
DESIGN 003
情熱的な赤。ホバー時に矢印が右へスライドする視覚的誘導を加え、次のステップへ読者の背中を押すデザイン。
DESIGN 004
注意を惹きつける警告イエロー。波紋が広がるようなパルスアニメーションで、触りたくなる本能を刺激。
DESIGN 005
洗練されたエメラルドグラデ。成約率の高いLPで愛用されるクリーンかつ信頼性を最も獲得しやすい鉄板配色。
DESIGN 006
サイバーな直角四角形。透過の枠線にネオンが宿る近未来配色で、ホバー時に色が強烈に反転するギミック。
DESIGN 007
右端を斜めに大胆スライスした変則形状。紫とピンクの非対称グラデが絶妙な違和感を生み視線を奪う。
DESIGN 008
分厚い底面を持たせた、ぷにぷに感のある3D形状。濃いオレンジがゲームの決定ボタンのような快感を与える。
DESIGN 009
滑らかな丸みを帯びたカプセル形状。上下に緻密な艶（グロス）を走らせ、宝石のような極上の高級感を演出。
DESIGN 010
完全な正方形かつ、背景が白。広範囲に及ぶ淡い紫のぼかし影（フロート）だけで浮遊感を際立たせた究極の美。
DESIGN 011
本体の後ろに別枠が重なる立体的な形状。マウスを乗せると本体と枠が互いに引き締まる錯視ギミック。
DESIGN 012
左側に太いアクセント線を配置した非対称デザイン。ホバー時に左の線幅が倍増して押し込まれる視覚効果。
DESIGN 013
注意を惹きつける縞模様パターンを背景に採用。丸みを帯びた形状に淡い影を添えてクリックを誘発。
DESIGN 014
細長い楕円カプセル形状。内部の矢印記号がホバー時に右方向へスライドして進行方向を明確に示す。
DESIGN 015
背景のないテキストリンク調のミニマル形状。下部の中央から線が左右へ滑らかに広がる上品な演出。
DESIGN 016
対角の角だけを丸めた非対称の葉っぱ形状。ホバー時に丸める角が反転し、有機的な動きで目を引く。
DESIGN 017
鋭利な正方形枠。ホバーすると左から斜めの強烈なカラーが滑り込み、ボタン全体を塗りつぶす演出。
DESIGN 018
親しみやすさを持つ破線枠の形状。ホバー時に線が細かいドット模様へ変化し、細部が細かく動く視覚効果。
DESIGN 019
左右が開いた、上下線のみのサンドイッチ形状。ホバー時に上下の線が消え、背景が静かに浮かび上がる。
DESIGN 020
陰影で立体を表現する形状。ホバーした瞬間に影が内側に切り替わり、ボタンそのものが画面に陥没する。
DESIGN 021
四隅の角丸の値をあえて不均等に歪ませた有機的な形状。ホバー時に丸みが滑らかに入れ替わる個性派デザイン。
DESIGN 022
ダーク背景に映えるサイバーな極細枠形状。ホバー時にネオンのような強い光彩が周囲に溢れ出す。
DESIGN 023
左側に専用のインデックス領域を分断したコンポーネント形状。機能的でスマートな印象を与える。
DESIGN 024
2つの異なる色の細枠がズレて重なり合う立体的な形状。ホバーすると枠同士の距離が収束する。
DESIGN 025
文字の背後に蛍光ラインを敷いたテキストベース形状。ホバー時にラインが上に広がり全体を包み込む。
DESIGN 026
斜めに鋭く傾斜した平行四辺形の形状。中のテキストの傾きのみを補正し、スピード感とシャープさを表現。
DESIGN 027
対角のL字枠が囲むSF風の形状。ホバー時にL字が上下左右に拡大し、ボタン全体を覆い尽くして塗りつぶす。
DESIGN 028
細かいドットの網点を敷き詰めたアミエミ形状。ホバーすると背景の網点カラーが鮮やかに変化する。
DESIGN 029
透明感ある枠線形状。ホバーすると中心線から上下に向かって背景色がシャッターのように広がり展開する。
DESIGN 030
極太ブラック枠線と強烈な影を固定したポップアート形状。ホバー時にわずかに沈み込む物理的ギミック。
DESIGN 031
下半分を濃い色に塗り分けた変則ツートン形状。光が当たっているような立体感をマットに表現。
DESIGN 032
左右の両端を内側にえぐり、中央をシェイプさせたクビレ形状。特殊ポリゴンによる洗練された輪郭。
DESIGN 033
境界線がグラデーションで発光するネオン形状。ホバーすると内側に淡い光が染み出して満たされる。
DESIGN 034
斜めストライプの背景が常に左から右へ流れ続けるループアニメ形状。圧倒的な視覚誘導効果。
DESIGN 035
内側に白い点線の縫い目（ステッチ）を施したレトロ形状。外枠に余白を持たせた二重のレイヤー構造。
DESIGN 036
左端に強烈なアクセント色を配置。ホバー時に全体がその色に染まりながらスライドする視覚変化。
DESIGN 037
四隅を45度に鋭く削り落としたガジェット形状。無機質でプロフェッショナルな実用感を演出。
DESIGN 038
重なり合う二重の境界線。マウスを乗せると中央から色が水平に溢れ出して枠線を満たすギミック。
DESIGN 039
3色の鮮烈なグラデーションが生き物のようにうねり続ける形状。近未来の流動エネルギーを表現。
DESIGN 040
上下に極太のサンドラインを配置した強固なフレーム形状。シンプルかつ圧倒的な重厚感を持つ。
DESIGN 041
斜め115度で均等分割された2色構造。ホバーと同時に色の境界線が高速スライドする鮮烈なギミック。
DESIGN 042
左端に独立した操作ブロックを配置。ホバーすると本体の色が沈み、ブロックの色が鮮やかに変化。
DESIGN 043
外周を並走する破線の外枠。ホバーの衝撃で破線フレームが外側へと爆発するように拡散・消滅する。
DESIGN 044
対角の角だけを鋭利に丸めた木の葉（リーフ）型。ホバーすると丸みの位置が瞬時に入れ替わる変則動作。
DESIGN 045
漆黒の背景に映えるサイバーネオンフレーム。ホバーで枠線全体から強烈な光彩が周囲に広がる。
DESIGN 046
ダークトーンに映える青の輪郭。ホバーすると中心から円形に塗りつぶしが広がる先進的なインクエフェクト。
DESIGN 047
深みのあるティールカラーの波状シェイプ。ホバーすると対角の角丸が逆転し、有機的な形状変化を見せる。
DESIGN 048
右端の矢印セクションを縦割りにしたローズボタン。ホバーで矢印エリアが深くなり、前進する挙動。
DESIGN 049
インディゴの細い2重線で構成された透明ボタン。ホバーすると2つの枠線がクロスするように別方向に回転する。
DESIGN 050
鋭く傾斜した平行四辺形のアンバーボタン。ホバーと同時に、内部の鋭利な光沢ラインが超高速で走る。
