【CodePen】CSSで作る3Dボタンのアイデア15選

💡 実装のポイント
<span><a>要素のみのシンプル構成。a::before(正面/ボタン色)とa::after(底面)をrotateXで組み立て、hoverでrotateX(-90deg)させることで前面と底面が入れ替わる仕組み。ボタン色はa::beforeのbackground、テキストはcontent: "BUTTON"で固定されているためCSS側の書き換えが必要。JSは使用していない。

💡 実装のポイント
PugとSCSSで書かれているため、そのまま使う場合は「View Compiled HTML/CSS」からの書き出しが必要。.btn > spanの::afterがcontent: attr(data-label)でHTML側のdata-label属性からテキストを生成する仕組みなので、表示文言はHTMLの属性値を書き換えるだけで変更できる。hoverでrotateX(90deg) translateY(-30%)させて裏面を見せる。

💡 実装のポイント
.btn .content配下に.front/.backの2レイヤーをtranslateZで前後に配置し、hoverでrotateY(.5turn)させてFont Awesomeアイコンとテキストを入れ替える仕組み。アイコン表示にはFont Awesomeの読み込みが必須(fa-vk等)。色は.btn--1 iのように連番クラスで個別に指定する設計。

💡 実装のポイント
.retro-btnにprimary/secondary/danger/warning/success/infoの状態クラスを組み合わせる設計で、色は.btn-inner .content-wrapperと.btn-contentのbackground-colorをペアで変更する。JS側はmousemoveでカーソル位置を判定しbtn-left/btn-center/btn-rightクラスを切り替えて傾きを変える凝った仕組み。同梱のローダーボタンはLoaderButtonクラスで進捗バーを実装しており、単体利用時は該当ブロックのみ抜き出す必要がある。

💡 実装のポイント
#btnMainにperspectiveをかけ、#btnBox(正面)と#btnBottom(底面、常時rotateX(-87deg)で折り曲げ済み)の2枚構成。hoverで#btnBoxをrotateX(25deg)、#btnBottomをrotateX(-70deg)に変化させて押し込み感を出す。色は2つの要素のbackground-colorを変えるだけでOK。JSは不使用。

💡 実装のポイント
.button::beforeが影用の帯、.button__innerが前面のテキストレイヤーで、hover/focusで.button__innerをtranslate3D(0,-10px,0)させて浮かせつつ、影の帯を右にスライドさせる仕組み。.button--secondaryクラスを足すだけで配色違いのバリエーションを追加できる設計。hoverだけでなくfocusにも対応しておりアクセシビリティ意識のある実装。

💡 実装のポイント
.btn_south-face(奥の面)の上に.btn-3d(手前のボタン)を重ね、hover/activeで.btn-3dのbottom値を動かして押し込み感を演出するシンプルな2レイヤー構成。CSS変数--pink等で配色を一括管理している。JS側はmakeShadow()関数で1pxごとに影を重ねてグラデーション状の立体影を動的生成しており、影の色はblueShadow/pinkShadow変数を書き換えれば変更できる。

💡 実装のポイント
ボタン本体は透明にし、::before(グラデーションの正面)と::after(濃い色の底面、rotateX(-40deg)で傾斜)の2つの疑似要素で立体感を作る古典的な手法。hoverでtop:-6pxさせて浮かせ、activeでtop:0に戻すことで押し込みを表現している。色を変えるには::beforeと::after両方のグラデーション色をセットで書き換える必要あり。SCSS(@mixin使用)なのでコンパイルが必要。

💡 実装のポイント
.btn_3d > spanが本体、その中のspan::before/::afterの2本線が回転して「＋」⇔「－」に切り替わるアイコンボタン。jQueryでclick時にactiveクラスをtoggleし、CSS側で&.active時のtransformを分岐させている。hoverではrotateX(30deg)、activeではrotateX(20deg)と段階的に角度を変える設計。

💡 実装のポイント
独自ライブラリ「YEK」のSCSS mixin(yek-flex、yek-size等)に依存した構成で、&::before/&::afterが箱の側面・底面をskewX/skewYで表現している。@mixin bx-variantでSNSごとの配色(YouTube赤・Twitter青等)をまとめて定義。単体で使う場合はSCSSコンパイル環境に加え、Font AwesomeとYEKライブラリのCDN読み込みが必要な点に注意。

💡 実装のポイント
mix-blend-mode: color-dodgeを使い、ボタン背景色と::before(赤)/::after(紫)の疑似要素を重ねて発光したような配色に見せる仕組み。hover時は--zカスタムプロパティを使ったtranslateWobbleアニメーションで疑似要素を前後に揺らす。メニュー全体も常時rotateAngleで自動回転しているため、静止させたい場合はmainのanimationを削除する必要がある。

💡 実装のポイント
.button-3d全体をperspective配下に置き、labelや.icon/.textの::before(奥行き用の複製)をtranslateZで前後配置。hoverで.button-3dごとtranslateY(-3vw)浮かせつつ、影用の複製テキストにfilter: blurをかけて奥行きを演出する。ボタン自体もspinキーフレームで常時ゆっくり回転しているため、静的にしたい場合はbuttonのanimationを外す必要がある。

💡 実装のポイント
JS側でmousemoveイベントごとにマウス位置からボタン中心までの角度をatan2で計算し、rotateX/rotateYと光沢用グラデーションの角度を動的に反映させる仕組み。光沢レイヤー(.effect3d--shine)はJSでcreateElementして動的に追加している。複数要素に適用したい場合は.moveable-3dクラスを付与するだけで同じロジックを使い回せる。

💡 実装のポイント
ボタン全面を細かい.hover-colのグリッドで覆い、SCSSの@forループで各セルhover時に背後の3DアイコンのrotateX/rotateY角度を1つずつ計算する構成。3Dアイコン自体も.wall×4面＋.roof＋.floorなど多数の要素をtranslateZで組み立てた本格的な立体モデル。JSは一切使用せず、PugのforループでHTML生成も簡略化しているが、SCSS/Pugのコンパイル環境が前提。

💡 実装のポイント
見た目は普通のボタンだが、裏側でThree.jsのWebGLシーン(球体・トーラス・円錐)をcanvasにレンダリングしており、hover時にGSAP(TweenMax)でそれぞれの図形をスケール・位置アニメーションさせる本格的な実装。導入にはthree.jsとgsap(TweenMax)の外部ライブラリが必須で、テクスチャ画像も外部URLに依存しているため、そのまま流用するにはアセットの用意が必要。