傾いて落ちるボタンのCSSジェネレーター
ホバーするとぐらっと傾き、クリックすると画面外へと落下するボタン用のアニメーションCSSを生成します。
プレビュー
<button class="gravity-btn">{{btn_text}}</button>/* 傾いて落ちるボタンの基本設定 */
.gravity-btn {
position: relative;
display: inline-block;
padding: 14px 28px;
font-size: 16px;
font-weight: bold;
color: {{text_color}};
background-color: {{btn_color}};
border: none;
border-radius: {{btn_radius}}px;
cursor: pointer;
outline: none;
user-select: none;
/* 傾きアニメーションのイージング設定 */
transition: transform {{tilt_duration}}s cubic-bezier(0.3, 1.5, 0.6, 1), background-color 0.2s;
/* 回転・落下の軸となる支点（中央上に固定） */
transform-origin: top center;
}
/* マウスホバーでぐらっと傾く */
.gravity-btn:hover {
transform: rotate({{tilt_angle}}deg);
background-color: color-mix(in srgb, {{btn_color}}, black 10%);
}
/* クリック（フォーカス）時に画面外へ落下する演出 */
.gravity-btn:focus {
/* translateYを優先して適用し、真下への落下軌道を保証 */
animation: fallDown {{fall_duration}}s forwards ease-in;
pointer-events: none; /* 落下中の連続クリックを防ぐ */
}
@keyframes fallDown {
0% {
/* transformの順序: translateY -> rotate にすることで、回転軸に依存せず真下に落下させます */
transform: translateY(0) rotate({{tilt_angle}}deg);
opacity: 1;
}
100% {
transform: translateY(800px) rotate({{fall_rotation}}deg);
opacity: 0;
}
}機能・使い方
- マウスをホバーすると、上部中央を軸にしてボタンがぐらっと傾きます。
- ボタンをクリックすると、重力で引っ張られたように回転しながら真下（垂直方向）へ真っ直ぐ落下します。
- 落下後は、プレビューエリア以外の場所をクリックしてフォーカスを外すことで、ボタンが元の位置にリセットされます。
CSSプロパティの説明
transform-originプロパティにtop center（上部中央）を指定することで、ボタンが上から吊るされ、重力で傾くような物理挙動の軸を表現しています。
クリック時の落下アニメーションには:focus擬似クラスを採用しています。これによりJavaScriptを使うことなく、クリック後（フォーカスが外れるまで）もアニメーション終了状態（不透明度0かつ画面外）を維持することができます。
@keyframes内のtransformプロパティで、translateY()による移動をrotate()による回転よりも先に記述することで、傾き角度の座標軸に影響されることなく、進行方向が常に真下（垂直）を維持する落下軌道を実現しています。
