パーツ番号 08-11-08 ・ JavaScript使用
ドクンと脈打つ長押しボタン
押し続けると縮んだまま待機し、規定の長さ押し切ると心拍のように二度弾んで確定します。WordPressの重要操作の誤タップ防止ボタンに使えます。
プレビュー
ソースコード
HTML
<div class="d08-11-08-stage">
<button class="d08-11-08-btn" type="button">長押しで確定</button>
<span class="d08-11-08-status"></span>
</div>CSS
.d08-11-08-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
.d08-11-08-btn{background:linear-gradient(135deg,#6a5cff,#8b7bff);color:#fff;border:none;border-radius:12px;padding:14px 26px;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;transition:transform .15s}
.d08-11-08-btn.is-press{transform:scale(.94)}
.d08-11-08-btn.is-confirm{animation:d08-11-08-thump .6s ease-in-out}
@keyframes d08-11-08-thump{0%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(.96)}45%{transform:scale(1.12)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.d08-11-08-status{font-size:12px;font-weight:700;color:#6a5cff;min-height:16px;display:block}JavaScript
(function(){
var btn=document.querySelector('#item-08-11-08 .d08-11-08-btn');
var status=document.querySelector('#item-08-11-08 .d08-11-08-status');
if(!btn||!status)return;
var holdTimer=null,clearTimer=null;
function startPress(){
if(clearTimer)clearTimeout(clearTimer);
status.textContent='';
btn.classList.add('is-press');
holdTimer=setTimeout(function(){
btn.classList.remove('is-press');
btn.classList.remove('is-confirm');void btn.offsetWidth;btn.classList.add('is-confirm');
status.textContent='確定しました';
clearTimer=setTimeout(function(){status.textContent='';},1400);
},650);
}
function cancelPress(){
if(holdTimer){clearTimeout(holdTimer);holdTimer=null;}
btn.classList.remove('is-press');
}
btn.addEventListener('mousedown',startPress);
btn.addEventListener('touchstart',startPress,{passive:true});
btn.addEventListener('mouseup',cancelPress);
btn.addEventListener('mouseleave',cancelPress);
btn.addEventListener('touchend',cancelPress);
btn.addEventListener('touchcancel',cancelPress);
})();クラス名 .d08-11-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。