立体感のあるボタンは、それだけでクリックしたくなる不思議な引力があります。平面の画面の中に「奥行き」や「重さ」を感じさせる3Dデザインは、特にCTAボタンや送信ボタンのようなアクション誘導が必要な場面で、クリック率に直結する演出です。押し込まれる感触・ふわりと浮き上がる動き・カードがくるりと裏返る驚き。そして積み上がった層の存在感、奥に傾くような浮遊感。どれも、見ているだけで「試してみたい」と感じさせる力を持っています。
この記事では、CSSのみで実装した3Dエフェクトボタンを5本紹介します。JavaScriptは一切使わず、コピペすればすぐに使えます。WordPress / SWELLのカスタムCSSにも対応。各デモには調整方法も記載しているので、色やサイズをお好みに合わせてカスタマイズしてみてください。
Push Down（プッシュ・ダウン）
物理的にボタンを押し込むような感覚を表現したデザインです。ホバー時にボタンが沈み、:active（クリック中）でさらに深く沈み込む2段階の動きが、リアルな押し心地を生み出します。box-shadowで底面の厚みを表現し、transform: translateYで沈み込みを制御するシンプルな仕組み。問い合わせフォームの送信ボタンや、ゲーム系・アクション系サイトのCTAに特によく合います。
See the Pen Push Down by BaseKENT (@basekent) on CodePen.
調整方法
- ボタンの色:
background-color: #4a6cf7をお好みの色に変更してください - 底面の厚み:
box-shadow: 0 6px 0 #2a4ab0の6pxの数値で厚みを調整できます。大きいほど立体感が増します - 沈み込み量:
:activeのtransform: translateY(6px)の数値はbox-shadowの初期px値と揃えるとボタンが底面まで綺麗に沈みます
Float Up（フロート・アップ）
ホバーするとボタンが静かに浮き上がり、影が深くなるデザインです。「手前に迫ってくる」ような奥行き感を、transform: translateY(-6px) とbox-shadowの拡大で表現しています。派手なアニメーションではなく、上品な浮遊感が特徴。コーポレートサイトのCTAや、ポートフォリオの「お問い合わせ」ボタンなど、落ち着いた雰囲気を大切にしたい場面にも自然に馴染みます。
See the Pen Float Up by BaseKENT (@basekent) on CodePen.
調整方法
- 浮き上がり量:
:hoverのtransform: translateY(-6px)の数値で調整します。小さくするとさりげない動きに - 影の広がり:
:hoverのbox-shadow第1値0 14px 24pxを変更して影の広がり方を調整できます - 背景色:
background-color: #e74c3cを変更してください。影はrgbaで半透明指定しているため、色を変えても自然に馴染みます
Flip Card（フリップ・カード）
ホバーするとボタンがY軸を中心にくるりと裏返り、別のテキストが現れるデザインです。perspective と rotateY の組み合わせで3D回転を実現し、backface-visibility: hidden で裏面が透けないように制御しています。「HOVER ME」→「LET’S GO!」のような2段階のメッセージ設計ができるため、動きでユーザーの興味を引きたいポートフォリオや、遊び心のあるLPのアクセントに最適です。なお、スマートフォンではタップ時に表面・裏面が切り替わりますが、ホバー操作がないため「戻す」動作はタップ外で行います。
See the Pen Flip Card by BaseKENT (@basekent) on CodePen.
調整方法
- 表・裏のテキスト: HTML内
.frontと.backのテキストをそれぞれ変更してください - 回転速度:
.front, .backのtransition: transform 0.5sの秒数を変えると回転のスピードが変わります - 遠近感の強さ:
.btn-flipのperspective: 300pxの数値を小さくするほど遠近感が強くなります
Layered Stack（レイヤード・スタック）
複数の影を重ねて「積み上がった紙の束」のような厚みを表現するデザインです。box-shadow を3層指定することで段差のある立体感を作り、ホバーで影が縮まりながらボタンが右下に移動します。まるで実際にスタックの上を指で押したような動きが直感的で分かりやすい。ゲーム系のスコアボタンや、子ども向けサイトのナビゲーション、とにかく「押された感」が欲しい場面で活躍します。
See the Pen Layered Stack by BaseKENT (@basekent) on CodePen.
調整方法
- 影の段数・色:
box-shadowの3層それぞれの色を調整します。ベースカラーの暗い色で統一すると自然です - 移動量:
:hoverのtransform: translate(6px, 6px)の数値を影の最大オフセット（9px）と合わせると綺麗に収まります - ボタン色:
background-colorとbox-shadowの各色をセットで変更してください
Tilt Hover（ティルト・ホバー）
ホバーするとボタンがX軸方向に傾き、奥に倒れ込むような3D浮遊感を演出するデザインです。perspective と rotateX の組み合わせで実現しており、影も同時に広がることでボタンが画面から飛び出してくるような視覚効果が生まれます。グラデーション背景との相性が良く、暗い背景に映えるハイコントラストなビジュアルが特徴。ポートフォリオのヒーローセクションや、インパクトのあるLPのファーストビューCTAに。
See the Pen Tilt Hover by BaseKENT (@basekent) on CodePen.
調整方法
- 傾きの角度:
:hoverのrotateX(18deg)の数値を変えます。10deg程度にするとさりげない傾きに - グラデーション:
background: linear-gradient(135deg, #f093fb, #f5576c)の色を変更してください - 背景色:
bodyのbackground: #1a1a2eを変えると、ボタンの影の見え方も変わります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
