ボタン

ボタンに分類されるWeb表現技法11件。グラデーション光沢、アウトライン→塗り、ネオン発光、3Dプッシュなど。ライブデモとコピーできるコード付き。

紫〜青のグラデーションボタン。ホバーで斜めの光沢が左から右へ走り抜け、待機中も影がゆっくり呼吸します。ECの購入ボタンや主要CTAに最適です。

枠線だけのボタンが、ホバーで下から色がせり上がり塗りつぶされ、文字色も同時に白へ反転します。控えめな副次アクションのボタンに向きます。

漆黒の背景に浮かぶ枠と文字がシアンに多重発光。待機中は淡く呼吸し、ホバーで発光が強まり、押すと沈み込みます。配信やゲーム系サイトのCTAに。

下に厚みの影を持つ立体ボタン。ホバーで浮き上がり、クリックすると沈み込んで厚みが減る物理的な押下感を再現します。予約や決済の後押しに。

シンプルな遷移ボタン。ホバーで矢印アイコンが右からスライドインしながらラベルがわずかに左へ寄り、クリックすると矢印が前へ弾んで進む感覚を演出します。次へ進む導線に。

背景の光る玉がゆっくり漂う上でガラス質のボタンが半透明に輝きます。上部のハイライトとぼかしが素材感を強調し、カラフルな背景に映える主要アクションに向きます。

クリックでラベルが消えスピナーが回転し、約1.2秒後に✓へ切替わり色も緑に変化します。フォーム送信や保存操作の結果を分かりやすく伝えます。

枠線だけのシンプルなボタン。ホバーすると上辺→右辺→下辺→左辺の順で枠線が一筆書きのように描かれ輪郭が浮かび上がります。控えめな副次アクションに向く上品な演出です。

白地に縁取りだけのボタン。ホバーするとカーソルのある位置を起点に円状の塗りが広がり、文字色も同時に反転します。カーソルを追いかける動きが目を引くCTAに使えます。

週・月・年のようなピル状の3択切替。クリックすると白い選択インジケータが滑らかにスライドして移動し、aria-pressedも排他的に更新されます。矢印キーでも操作できます。

＋のFABをクリックすると共有・編集・削除の3アクションが縦方向へ時間差で展開し、アイコンは×へ回転します。もう一度押す・外側クリック・Escapeで畳めます。