ドアが開閉するログインボタン

3D空間で扉が開く演出

ログインボタンは多くのWebサイトで使われる重要なUIパーツですが、単なるテキストボタンでは印象に残りにくいものです。

CSS 3D transformを活用してドアが手前に開くアニメーションを実装することで、「新しい世界への入り口」というログインの意味を視覚的に表現できます。ユーザーに「中に入る」というメタファーを直感的に伝え、クリックへの期待感を高めます。

作成したドアが開閉するログインボタン

HTML

<button class="login-button" aria-label="ログインページへ">
        <!-- HTML+CSS3Dアイコン -->
        <div class="door-icon-root">
            <div class="door-frame"></div>
            <div class="door-leaf">
                <div class="door-knob"></div>
            </div>
        </div>

        <span class="login-text">ログイン</span>
    </button>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f4f6f8;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* エントリーボタン */
        .login-button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            /* 一般的なWebサイトのボタンサイズに最適化 (高さ約48px) */
            padding: 12px 28px;
            min-width: 180px;
            
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.05em;
            line-height: 1.5;
            
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
        }

        /* ホバー時のボタンスタイル */
        .login-button:hover {
            background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.2), 
                        0 2px 4px -1px rgba(15, 23, 42, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .login-button:active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
        }

        /* 3Dドアアイコン設定（HTML+CSS3D） */
        .door-icon-root {
            width: 16px;  /* 幅を狭く */
            height: 28px; /* 高さを大きくして縦長に */
            position: relative;
            /* 
              perspectiveを小さくすることで、より広角レンズのようなきついパースをつける。
              添付画像のような極端な台形にするには、視点をかなり近くに置く必要がある。
            */
            perspective: 150px; 
            transform-style: preserve-3d;
            /* 少し上から見下ろすようなアングルをつけて立体感を強調する場合 */
            /* transform: rotateX(5deg); */
        }

        /* 枠（固定部分）: ドアが開いた跡に残る */
        .door-frame {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 1px;
            box-sizing: border-box;
        }

        /* ドア本体（可動部分） */
        .door-leaf {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid #ffffff;
            border-radius: 1px;
            
            background: #1e293b; 
            
            box-sizing: border-box;
            transform-origin: left center;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            
            /* ドアノブの反対側（裏面）を描画しないことで、ペラペラの板感を減らす */
            /* backface-visibility: hidden; */ 
        }

        .door-knob {
            position: absolute;
            top: 50%;
            right: 3px;
            transform: translateY(-50%);
            width: 3px;
            height: 3px;
            background-color: #ffffff;
            border-radius: 50%;
            /* 3D空間での厚みを持たせるための影 */
            box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
        }

        /* ホバー時の動き：手前に大きく開く */
        .login-button:hover .door-leaf {
            /* 
               perspective: 150px に対して rotateY(-130deg) すると
               手前に大きく飛び出し、上下の辺が強い角度で台形に見えるようになる。
            */
            transform: rotateY(-110deg);
            background-color: #334155; /* 開いたときに少し明るくして光を受けている感じに */
        }



        /* テキストの微調整 */
        .login-text {
            position: relative;
            z-index: 2;
        }

        /* アクセシビリティ */
        @media (prefers-reduced-motion: reduce) {
            .login-button, .door-leaf {
                transition: none !important;
                transform: none !important;
            }
        }

このボタンの特徴

CSS 3D Transform perspectiveとrotateYを使って、本物のドアが手前に開く立体的な動きを実現
HTML+CSSのみで実装 JavaScriptを使わず、CSSだけでドアの構造とアニメーションを完全に表現
リアルな開閉動作 イージング関数cubic-bezierで、ドアがゆっくり開いて弾むような自然な動き
ドアノブの細部まで表現 小さな円形要素でドアノブを再現し、リアリティを追求
ログインの意味を視覚化 「中に入る」というメタファーで、ログインという行為を直感的に表現

コードのポイント

3D空間の設定:

.door-icon-root {
    width: 16px;
    height: 28px;
    perspective: 150px; /* 視点を近くに置いて広角レンズ効果 */
    transform-style: preserve-3d; /* 子要素の3D変形を有効化 */
}

perspectiveで3D空間の奥行き感を調整
値を小さくするほど広角レンズのような効果で、より立体的に見える
transform-style: preserve-3dで子要素の3D変形を保持

ドアの構造:

.door-frame {
    /* ドアが開いた跡に残る枠 */
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.door-leaf {
    /* 可動するドア本体 */
    transform-origin: left center; /* 左辺を軸に回転 */
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.door-knob {
    /* ドアノブ */
    position: absolute;
    top: 50%;
    right: 3px;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 50%;
}

door-frameは固定の枠として残る
door-leafは左辺を軸(transform-origin: left center)に回転
ドアノブは右側に配置して、開閉の視覚的なヒントを提供

ホバー時の回転アニメーション:

.login-button:hover .door-leaf {
    transform: rotateY(-110deg); /* 手前に110度回転 */
    background-color: #334155; /* 光を受けて明るく */
}

rotateY(-110deg)で左辺を軸に手前へ大きく開く
マイナス値で手前方向への回転を実現
perspective: 150pxとの組み合わせで、強い遠近感を表現
開いたドアの面を少し明るくして、光の当たり方を表現

自然な動きを生むイージング:

transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

cubic-bezier(0.175, 0.885, 0.32, 1.275)で独自のイージングカーブを定義
最後の値が1.0を超えることで、開ききった後に少し跳ね返る動きを表現
ドアが勢いよく開いて、少し戻る自然な挙動を再現

まとめ

ドアが開閉するログインボタンは、CSS 3D transformの力を最大限に活用したパーツです。perspective、transform-origin、rotateYを組み合わせることで、HTMLとCSSだけでリアルなドアの開閉を実現しています。ログインという行為を「扉を開けて中に入る」というメタファーで表現することで、ユーザーに直感的で印象的な体験を提供します。

ドア開閉ログインボタン作成のポイント

perspectiveで3D空間を作る 値を調整して遠近感の強さをコントロール
transform-originで回転軸を設定 左辺を軸にすることでドアらしい動きを実現
rotateYで立体的な回転 Y軸回転で手前に開く動きを表現
イージング関数で自然な動き 跳ね返りのあるcubic-bezierで物理的なリアリティを追加
メタファーで意味を伝える 「扉を開ける」という行為でログインの意味を視覚化