パーツ番号 04-01-05 ・ CSSのみ

3Dプッシュボタン

立体的なボタンがクリックで沈み込む、押し心地のある演出。WordPressの予約・購入ボタンなど行動を強く促す場面に。

clickcss3d

プレビュー

ソースコード

HTML

<button type="button" class="d04-01-05-btn">今すぐ予約する</button>

CSS

.d04-01-05-btn{
          padding:14px 44px;
          background:#f5a623;
          color:#4a2c00;
          font-size:15px;
          font-weight:700;
          letter-spacing:.08em;
          border:none;
          border-radius:10px;
          cursor:pointer;
          box-shadow:0 6px 0 #c47f0e, 0 10px 14px rgba(0,0,0,.18);
          transform:translateY(0);
          transition:transform .12s ease, box-shadow .12s ease;
        }
        .d04-01-05-btn:hover{
          transform:translateY(2px);
          box-shadow:0 4px 0 #c47f0e, 0 7px 10px rgba(0,0,0,.16);
        }
        .d04-01-05-btn:active{
          transform:translateY(6px);
          box-shadow:0 0 0 #c47f0e, 0 2px 4px rgba(0,0,0,.15);
        }

クラス名 .d04-01-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。