物理的に押し込むボタン（3Dプッシュボタン）のCSSジェネレーター
クリックした際に沈み込むような、厚みのある3Dボタンを生成します。奥行き、押し込み感、カラーを直感的に調整可能です。
プレビュー
<button class="push-btn"><span>{{text}}</span></button>/* ボタン本体（透過） */
.push-btn {
position: relative;
display: inline-block;
padding: 15px 30px;
border: none;
cursor: pointer;
outline: none;
background: transparent;
user-select: none;
/* 物理的な浮き上がり */
transform: translateY(-{{depth}}px);
transition: transform 0.1s, filter 0.1s;
}
/* マウスホバー時、少し明るくする */
.push-btn:hover {
filter: brightness(1.1);
}
/* ボタンの側面（厚み） */
.push-btn::before {
content: "";
position: absolute;
top: {{depth}}px;
left: 0;
width: 100%;
height: 100%;
border-radius: {{radius}}px;
/* 側面を少し暗くして立体感を出す */
background: color-mix(in srgb, {{color}}, black 30%);
z-index: -1;
transition: transform 0.1s;
}
.push-btn:active {
transform: translateY(0);
}
/* ボタンの上面（表面） */
.push-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: {{radius}}px;
width: 100%;
height: 100%;
background: {{color}};
}
.push-btn:active::before {
transform: translateY(-{{depth}}px);
}
/* ボタンテキスト */
.push-btn span{
position:relative;
z-index: 2;
color: #fff;
font-size: 1.2rem;
}機能、使い方
- ボタンの色、厚み、角丸を調整して、物理的に正しい挙動の3Dプッシュボタンを作成できます。
- 透過した本体の中に、疑似要素による「エッジ（厚み）」と「表面」を分離して配置しています。
- クリック（
active時）にボタン本体を地面へ沈ませる際、エッジ部分（::before）のみを逆方向に移動させて位置を相殺（キャンセル）することで、底面が地面に固定されたままボタンが圧縮される挙動を実現しています。 <span>タグでテキストを囲むことにより、表面の移動と重なり順（テキストの前面表示）を確実に両立させています。
CSSプロパティの説明
transform: translateY()の相殺ロジックがデザインの核心です。本体が沈む際、絶対配置された::before（厚み）を逆方向へ移動させることで、底辺は常にViewport上の同じ位置を維持します。これにより、安定した3Dプッシュを実現しています。
z-indexの指定により、背面の影（-1）→ 表面（0）→ テキスト（2）という正しい重なり順を定義し、デザインの一貫性を保っています。
