House Cat Stairs — Climbing Cat

Source Code

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

<button class="btt-control btt-cat" data-btt type="button" aria-label="ページの先頭へ戻る"><span class="c-bubble"><strong>ページの先頭へ</strong><small>PAGE TOP</small></span><span class="c-stair-case" aria-hidden="true"><i></i><i></i><i></i><img src="https://tipsblocks.com/wp-content/uploads/tipsblocks-btt-2085-2096/assets/cat-guide.png" class="c-cat-art" alt=""></span><span class="c-return-caption">いっしょに戻ろう <b>↗</b></span></button>

/* Isolated button CSS, extracted from approved original demo */
.btt-control,.btt-control *, .btt-control *::before,.btt-control *::after{box-sizing:border-box}.btt-control{font-family:Arial,"Noto Sans CJK JP","Yu Gothic",sans-serif}
.btt-control:focus-visible{outline:3px solid #f0ad4d;outline-offset:5px}
.btt-cat{position:fixed;z-index:50;right:clamp(8px,2.6vw,38px);bottom:12px;width:152px;height:194px;border:none;background:transparent;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .3s,transform .32s,visibility .3s;color:#62423a;padding:0}
.btt-cat.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.c-bubble{position:absolute;z-index:4;top:0;right:5px;min-width:142px;height:62px;padding:10px 8px;display:grid;align-content:center;gap:5px;border-radius:25px 25px 23px 25px;border:1px solid #c58a78;background:#fffaf3;box-shadow:0 7px 18px #7c564c29;text-align:center;transform-origin:85% 90%;animation:c-talk 4s ease-in-out infinite}
.c-bubble:after{content:"";position:absolute;bottom:-6px;right:24px;width:13px;height:13px;background:#fffaf3;border-right:1px solid #c58a78;border-bottom:1px solid #c58a78;transform:rotate(45deg)}
.c-bubble strong{font-size:12px;letter-spacing:.045em}
.c-bubble small{font:700 9px Arial;letter-spacing:.16em;color:#b17464}
.c-stair-case{position:absolute;left:0;right:0;top:60px;height:102px;display:block}
.c-stair-case i{position:absolute;bottom:0;background:#d8b39a;border-top:5px solid #ebccad;box-shadow:inset -5px -4px #a9796440}
.c-stair-case i:nth-child(1){left:8px;width:43px;height:31px}
.c-stair-case i:nth-child(2){left:49px;width:47px;height:55px;background:#cda58e}
.c-stair-case i:nth-child(3){left:94px;width:52px;height:78px;background:#c2947e}
.c-cat-art{position:absolute;left:4px;bottom:12px;width:89px;height:auto;object-fit:contain;transform:translate(calc(var(--step,0)*13px),calc(var(--step,0)*-13px));transition:transform .4s ease;filter:drop-shadow(0 6px 6px #543e352b);animation:c-cat-breathe 3.5s ease-in-out infinite}
.c-return-caption{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.c-return-caption b{color:#bc7665}
.btt-cat:hover .c-cat-art{animation:c-hop .55s ease-in-out infinite alternate}
.btt-cat:hover .c-bubble{background:#f8decf;border-color:#ae7161}
.btt-cat.is-going .c-cat-art{animation:c-run .6s ease-in-out infinite alternate}
@keyframes c-talk{0%,100%{transform:rotate(-1deg)}55%{transform:rotate(2deg)}}
@keyframes c-cat-breathe{0%,100%{filter:drop-shadow(0 6px 6px #543e352b) brightness(1)}50%{filter:drop-shadow(0 7px 7px #543e3535) brightness(1.04)}}
@keyframes c-hop{to{transform:translate(calc(var(--step,0)*13px + 6px),calc(var(--step,0)*-13px - 11px)) rotate(-5deg)}}
@keyframes c-run{to{transform:translate(49px,-45px) scale(.98)}}
@media (max-width:850px){.btt-cat{right:8px;bottom:8px;transform:translateY(18px) scale(.85);transform-origin:right bottom}
.btt-cat.is-visible{transform:scale(.85)}}
.btt-cat{box-sizing:border-box;right:clamp(12px,2.2vw,32px);bottom:18px;width:180px;height:218px;max-width:calc(100vw - 24px)}
.c-bubble{right:4px;top:0;min-width:0;width:156px;height:64px;padding:9px 10px;gap:4px}
.c-bubble strong{font-size:12px;line-height:1.4;letter-spacing:0;white-space:normal}
.c-bubble small{font-size:9px;line-height:1.2}
.c-stair-case{top:66px;height:117px}
.c-stair-case i:nth-child(1){left:11px;width:53px;height:38px}
.c-stair-case i:nth-child(2){left:62px;width:56px;height:67px}
.c-stair-case i:nth-child(3){left:116px;width:56px;height:93px}
.c-cat-art{left:3px;bottom:12px;width:104px}
.c-return-caption{bottom:7px;font-size:11px;white-space:normal;line-height:1.4}
@media (max-width:850px){.btt-cat{width:156px;height:191px;right:10px;bottom:14px;transform:translateY(18px);transform-origin:center center}
.btt-cat.is-visible{transform:none}
.c-bubble{width:146px;right:3px;height:61px;padding:8px 8px}
.c-stair-case{top:61px;height:104px}
.c-stair-case i:nth-child(1){left:8px;width:45px;height:32px}
.c-stair-case i:nth-child(2){left:50px;width:50px;height:57px}
.c-stair-case i:nth-child(3){left:98px;width:51px;height:83px}
.c-cat-art{width:89px;bottom:12px}
.c-return-caption{font-size:10px;bottom:4px}}
@media (max-width:370px){.btt-cat{right:8px;bottom:10px}}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const reduce=matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const y=scrollY;let p=Math.min(1,Math.max(0,y/Math.max(1,document.documentElement.scrollHeight-innerHeight)));el.classList.toggle('is-visible',y>170);el.tabIndex=y>170?0:-1;el.setAttribute('aria-hidden',String(!(y>170)));el.style.setProperty('--step',Math.min(3,Math.floor(p*3.4)));}addEventListener('scroll',()=>{if(!raf)raf=requestAnimationFrame(update)},{passive:true});addEventListener('resize',update,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});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

Lifestyle, home goods and pet-friendly brands.

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.