Recipe Step Clip — Back to Step One

Source Code

Copy the HTML, CSS or JavaScript you need for your project.

<button aria-label="レシピの最初の手順、ページの先頭へ戻る" class="btt-control btt-2088 btt-hidden" data-btt="" type="button"><span aria-hidden="true" class="clip-metal"></span><span class="clip-tag">RECIPE INDEX</span><span class="clip-number">01</span><span class="clip-label">最初の手順へ</span><span class="clip-state" data-state="">いま STEP 02</span></button>

 .btt-control{box-sizing:border-box;appearance:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.btt-control:focus-visible{outline:3px solid #e6a643;outline-offset:5px}.btt-hidden{opacity:0;visibility:hidden;pointer-events:none}.btt-visible{opacity:1;visibility:visible;pointer-events:auto} @media(prefers-reduced-motion:reduce){.btt-control,.btt-control *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
 .btt-2088{position:fixed;right:clamp(15px,3vw,44px);bottom:26px;z-index:40;width:149px;height:172px;padding:21px 14px 12px;border-radius:7px;border:1px solid #d3c5a9;background:#fff9e8;color:#4f4b36;box-shadow:0 15px 35px #42352e40;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transform:translateY(20px) rotate(2deg);transition:opacity .3s,transform .36s,box-shadow .3s,visibility .3s}.btt-2088.btt-visible{opacity:1;transform:rotate(2deg)}.clip-metal{position:absolute;top:-11px;left:50%;transform:translateX(-50%);height:30px;width:35px;border:5px solid #8d938b;border-bottom-width:4px;border-radius:15px 15px 6px 6px;box-shadow:0 3px 5px #0002}.clip-metal:after{content:'';position:absolute;left:10px;top:4px;width:5px;height:13px;background:#e0e6db;border-radius:5px;animation:clipGlimmer 4s ease-in-out infinite}.clip-tag{font:800 9px/1 Arial;letter-spacing:.13em;margin-top:8px;color:#7b8e71}.clip-number{font:400 50px/1 Georgia,serif;color:#4a654a}.clip-label{font:700 13px/1.35 'Noto Sans CJK JP',sans-serif;white-space:nowrap}.clip-state{font:600 9px/1.4 Arial;letter-spacing:.08em;margin-top:auto;color:#877f6d}.btt-2088:hover{transform:rotate(0) translateY(-8px);box-shadow:0 22px 45px #42352e48}.btt-2088.is-going .clip-number{color:#c68041}@keyframes clipGlimmer{0%,85%,100%{opacity:.4}91%{opacity:1}}@media(max-width:600px){.btt-2088{right:14px;bottom:19px;width:132px;height:152px;padding:18px 8px 9px}.clip-number{font-size:43px}.clip-label{font-size:12px}}
/* Field QA / positioning and responsive readability */
@media(max-width:600px){.btt-2088{width:119px;height:121px;padding:16px 7px 6px;gap:3px}.clip-tag{font-size:7.5px;margin-top:4px}.clip-number{font-size:35px}.clip-label{font-size:11px}.clip-state{font-size:8px}.clip-metal{height:25px;width:32px}}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const footerOnly=false;const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const p=Math.max(0,Math.min(1,window.scrollY/Math.max(1,document.documentElement.scrollHeight-window.innerHeight)));if(!footerOnly){const shown=window.scrollY>170;el.classList.toggle('btt-visible',shown);el.classList.toggle('btt-hidden',!shown);el.tabIndex=shown?0:-1;el.setAttribute('aria-hidden',String(!shown));}el.style.setProperty('--progress',p.toFixed(3));const field=el.querySelector('[data-state]');if(field)field.textContent='いま STEP '+String(Math.max(2,Math.min(5,Math.floor(p*5)+1))).padStart(2,'0');}function onScroll(){if(!raf)raf=requestAnimationFrame(update)}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('resize',onScroll,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});window.setTimeout(()=>el.classList.remove('is-going'),650)});update()})();

How to Use

Insert the HTML button near the end of body, load the CSS, and include JavaScript using defer. Test scrolling, returning to the top, and positioning on mobile.

Use Case

Recipes, cooking magazines and tutorials.

Technical Notes

Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.

Mobile：Check tap target, visibility and positioning on small screens.

Browser：Designed for current Chrome, Edge, Firefox and Safari.

Reduced Motion：CSS animations respect the reduced-motion preference.