Description
- button outline draw/arrow on hover
- view demo – password: abc
#1. Install Code
#1.1. One Page
Hover on Page where you want to apply effect > Click Gear icon
Click Advanced > Paste this code
<!-- 01.26c22v2 Button Outline Draw -->
<style>
:root{
--tp-ghost-icon-gap: 5px;
--tp-ghost-icon-reveal-width: 1.4em;
--tp-ghost-arrow-size: 0.9em;
--tp-ghost-stroke-width: 1.5;
--tp-ghost-stroke-primary: #fff;
--tp-ghost-arrow-primary: #fff;
--tp-ghost-stroke-secondary: #fff;
--tp-ghost-arrow-secondary: #fff;
--tp-ghost-stroke-tertiary: #fff;
--tp-ghost-arrow-tertiary: #fff;
}
.tp-ghost-btn{position:relative!important;overflow:hidden!important;--tp-ghost-len:0;--tp-ghost-nudge:0px;--tp-ghost-y:0px}.tp-ghost-label{position:relative;z-index:2}.tp-ghost-icon{position:relative;z-index:2;display:inline-grid;place-items:center;width:0;height:1em;margin-left:var(--tp-ghost-icon-gap);overflow:hidden;opacity:0;transform:translateX(-6px);transition:opacity 0.35s cubic-bezier(.22,.61,.36,1),transform 0.4s cubic-bezier(.22,.61,.36,1),width 400ms cubic-bezier(.22,.61,.36,1)}.tp-ghost-arrow svg{width:var(--tp-ghost-arrow-size);height:var(--tp-ghost-arrow-size);color:var(--tp-ghost-arrow,var(--tp-ghost-default-arrow,currentColor));display:block}.tp-ghost-trace{position:absolute;inset:calc((var(--tp-ghost-stroke-px, 2px) * -0.5) - var(--tp-ghost-nudge))!important;width:calc(100% + var(--tp-ghost-stroke-px, 2px) + (var(--tp-ghost-nudge) * 2))!important;height:calc(100% + var(--tp-ghost-stroke-px, 2px) + (var(--tp-ghost-nudge) * 2))!important;transform:translateY(var(--tp-ghost-y))!important;transform-origin:center!important;fill:none;pointer-events:none}.tp-ghost-rect{fill:none;stroke:var(--tp-ghost-stroke,var(--tp-ghost-default-stroke,currentColor));stroke-width:var(--tp-ghost-stroke-width);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--tp-ghost-len);stroke-dashoffset:var(--tp-ghost-len);opacity:0;transition:stroke-dashoffset 850ms cubic-bezier(.22,.61,.36,1),opacity 0.2s ease}.tp-ghost-btn:hover .tp-ghost-icon{opacity:1;transform:translateX(0);width:var(--tp-ghost-icon-reveal-width)}.tp-ghost-btn:hover .tp-ghost-rect{stroke-dashoffset:0;opacity:1}.tp-ghost-btn.sqs-button-element--primary{--tp-ghost-stroke:var(--tp-ghost-stroke-primary);--tp-ghost-arrow:var(--tp-ghost-arrow-primary)}.tp-ghost-btn.sqs-button-element--secondary{--tp-ghost-stroke:var(--tp-ghost-stroke-secondary);--tp-ghost-arrow:var(--tp-ghost-arrow-secondary)}.tp-ghost-btn.sqs-button-element--tertiary{--tp-ghost-stroke:var(--tp-ghost-stroke-tertiary);--tp-ghost-arrow:var(--tp-ghost-arrow-tertiary)}.tp-ghost-btn.tp-ghost-pill{overflow:visible!important;--tp-ghost-nudge:2px;--tp-ghost-y:0px}
</style>
<script>
(() => {
"use strict";
const SELECTOR = [
'a.sqs-block-button-element:not([data-ghostified])',
'button.form-submit-button:not([data-ghostified])',
'button.newsletter-form-button:not([data-ghostified])',
'a.btn.btn--border:not([data-ghostified])'
].join(",");
const arrowSvg='\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" focusable="false">\n <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>\n </svg>\n ',makeTraceSvg=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("class","tp-ghost-trace"),t.setAttribute("viewBox","0 0 100 40"),t.setAttribute("preserveAspectRatio","none"),t.setAttribute("aria-hidden","true");const e=document.createElementNS("http://www.w3.org/2000/svg","rect");return e.setAttribute("class","tp-ghost-rect"),e.setAttribute("x","0.5"),e.setAttribute("y","0.5"),e.setAttribute("width","99"),e.setAttribute("height","39"),e.setAttribute("rx","10"),e.setAttribute("ry","10"),t.appendChild(e),t},num=t=>{const e=parseFloat(t);return Number.isFinite(e)?e:0},getLabelText=t=>{if(t.matches("button.form-submit-button")){const e=t.querySelector(".form-submit-button-label");return e?e.textContent.trim():t.textContent.trim()}if(t.matches("button.newsletter-form-button")){const e=t.querySelector(".newsletter-form-button-label");return e?e.textContent.trim():t.textContent.trim()}return t.textContent.trim()},setLabelNode=(t,e)=>{if(t.matches("button.form-submit-button")){const r=t.querySelector(".form-submit-button-label");if(r)return r.classList.add("tp-ghost-label"),void(r.textContent=e.textContent)}if(t.matches("button.newsletter-form-button")){const r=t.querySelector(".newsletter-form-button-label");if(r)return r.classList.add("tp-ghost-label"),void(r.textContent=e.textContent)}t.innerHTML="",t.appendChild(e)},syncTraceGeometry=t=>{const e=t.querySelector(".tp-ghost-trace"),r=e&&e.querySelector(".tp-ghost-rect");if(!r)return;const o=getComputedStyle(t),n=Math.max(num(o.borderTopLeftRadius),num(o.borderTopRightRadius),num(o.borderBottomRightRadius),num(o.borderBottomLeftRadius)),s=t.getBoundingClientRect().height||40,i=Math.max(0,Math.min(20,n/s*40));r.setAttribute("rx",String(i)),r.setAttribute("ry",String(i));const a=r.getTotalLength();t.style.setProperty("--tp-ghost-len",String(a));const l=num(getComputedStyle(t).getPropertyValue("--tp-ghost-stroke-width"))||1.5;t.style.setProperty("--tp-ghost-stroke-px",l+"px");const u=n>=s/2-1;t.classList.toggle("tp-ghost-pill",u)},ghostify=t=>{t.setAttribute("data-ghostified","true"),t.classList.add("tp-ghost-btn");const e=getComputedStyle(t),r=e.borderTopColor||e.borderColor||e.color,o=e.color;t.style.setProperty("--tp-ghost-default-stroke",r),t.style.setProperty("--tp-ghost-default-arrow",o);const n=document.createElement("span");if(n.className="tp-ghost-label",n.textContent=getLabelText(t),setLabelNode(t,n),!t.querySelector(".tp-ghost-icon")){const e=document.createElement("span");e.className="tp-ghost-icon",e.setAttribute("aria-hidden","true");const r=document.createElement("span");r.className="tp-ghost-arrow",r.innerHTML=arrowSvg,e.appendChild(r),t.appendChild(e)}t.querySelector(".tp-ghost-trace")||t.appendChild(makeTraceSvg()),requestAnimationFrame((()=>syncTraceGeometry(t)))},run=()=>{document.querySelectorAll(SELECTOR).forEach(ghostify)},refreshAll=()=>{document.querySelectorAll("[data-ghostified].tp-ghost-btn").forEach(syncTraceGeometry)},boot=()=>{run();new MutationObserver((()=>run())).observe(document.body,{childList:!0,subtree:!0}),window.addEventListener("resize",(()=>requestAnimationFrame(refreshAll))),window.addEventListener("orientationchange",(()=>requestAnimationFrame(refreshAll))),setTimeout(refreshAll,250)};window.addEventListener("load",boot),window.addEventListener("mercury:load",(()=>{run(),setTimeout(refreshAll,250)}));
})();
</script>
<!-- END 01.26c22v2 Button Outline Draw -->
#1.2. All Pages
First, use this code to Code Injection > Header
<!-- Button Outline Draw -->
<style>
:root{
--tp-ghost-icon-gap: 5px;
--tp-ghost-icon-reveal-width: 1.4em;
--tp-ghost-arrow-size: 0.9em;
--tp-ghost-stroke-width: 1.5;
--tp-ghost-stroke-primary: #fff;
--tp-ghost-arrow-primary: #fff;
--tp-ghost-stroke-secondary: #fff;
--tp-ghost-arrow-secondary: #fff;
--tp-ghost-stroke-tertiary: #fff;
--tp-ghost-arrow-tertiary: #fff;
}
.tp-ghost-btn{position:relative!important;overflow:hidden!important;--tp-ghost-len:0;--tp-ghost-nudge:0px;--tp-ghost-y:0px}.tp-ghost-label{position:relative;z-index:2}.tp-ghost-icon{position:relative;z-index:2;display:inline-grid;place-items:center;width:0;height:1em;margin-left:var(--tp-ghost-icon-gap);overflow:hidden;opacity:0;transform:translateX(-6px);transition:opacity 0.35s cubic-bezier(.22,.61,.36,1),transform 0.4s cubic-bezier(.22,.61,.36,1),width 400ms cubic-bezier(.22,.61,.36,1)}.tp-ghost-arrow svg{width:var(--tp-ghost-arrow-size);height:var(--tp-ghost-arrow-size);color:var(--tp-ghost-arrow,var(--tp-ghost-default-arrow,currentColor));display:block}.tp-ghost-trace{position:absolute;inset:calc((var(--tp-ghost-stroke-px, 2px) * -0.5) - var(--tp-ghost-nudge))!important;width:calc(100% + var(--tp-ghost-stroke-px, 2px) + (var(--tp-ghost-nudge) * 2))!important;height:calc(100% + var(--tp-ghost-stroke-px, 2px) + (var(--tp-ghost-nudge) * 2))!important;transform:translateY(var(--tp-ghost-y))!important;transform-origin:center!important;fill:none;pointer-events:none}.tp-ghost-rect{fill:none;stroke:var(--tp-ghost-stroke,var(--tp-ghost-default-stroke,currentColor));stroke-width:var(--tp-ghost-stroke-width);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--tp-ghost-len);stroke-dashoffset:var(--tp-ghost-len);opacity:0;transition:stroke-dashoffset 850ms cubic-bezier(.22,.61,.36,1),opacity 0.2s ease}.tp-ghost-btn:hover .tp-ghost-icon{opacity:1;transform:translateX(0);width:var(--tp-ghost-icon-reveal-width)}.tp-ghost-btn:hover .tp-ghost-rect{stroke-dashoffset:0;opacity:1}.tp-ghost-btn.sqs-button-element--primary{--tp-ghost-stroke:var(--tp-ghost-stroke-primary);--tp-ghost-arrow:var(--tp-ghost-arrow-primary)}.tp-ghost-btn.sqs-button-element--secondary{--tp-ghost-stroke:var(--tp-ghost-stroke-secondary);--tp-ghost-arrow:var(--tp-ghost-arrow-secondary)}.tp-ghost-btn.sqs-button-element--tertiary{--tp-ghost-stroke:var(--tp-ghost-stroke-tertiary);--tp-ghost-arrow:var(--tp-ghost-arrow-tertiary)}.tp-ghost-btn.tp-ghost-pill{overflow:visible!important;--tp-ghost-nudge:2px;--tp-ghost-y:0px}
</style>
<!-- END - Button Outline Draw -->
Next, use this code to Code Injection > Footer
<!-- Button Outline Draw -->
<script>
(() => {
"use strict";
const SELECTOR = [
'a.sqs-block-button-element:not([data-ghostified])',
'button.form-submit-button:not([data-ghostified])',
'button.newsletter-form-button:not([data-ghostified])',
'a.btn.btn--border:not([data-ghostified])'
].join(",");
const arrowSvg='\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" focusable="false">\n <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>\n </svg>\n ',makeTraceSvg=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("class","tp-ghost-trace"),t.setAttribute("viewBox","0 0 100 40"),t.setAttribute("preserveAspectRatio","none"),t.setAttribute("aria-hidden","true");const e=document.createElementNS("http://www.w3.org/2000/svg","rect");return e.setAttribute("class","tp-ghost-rect"),e.setAttribute("x","0.5"),e.setAttribute("y","0.5"),e.setAttribute("width","99"),e.setAttribute("height","39"),e.setAttribute("rx","10"),e.setAttribute("ry","10"),t.appendChild(e),t},num=t=>{const e=parseFloat(t);return Number.isFinite(e)?e:0},getLabelText=t=>{if(t.matches("button.form-submit-button")){const e=t.querySelector(".form-submit-button-label");return e?e.textContent.trim():t.textContent.trim()}if(t.matches("button.newsletter-form-button")){const e=t.querySelector(".newsletter-form-button-label");return e?e.textContent.trim():t.textContent.trim()}return t.textContent.trim()},setLabelNode=(t,e)=>{if(t.matches("button.form-submit-button")){const r=t.querySelector(".form-submit-button-label");if(r)return r.classList.add("tp-ghost-label"),void(r.textContent=e.textContent)}if(t.matches("button.newsletter-form-button")){const r=t.querySelector(".newsletter-form-button-label");if(r)return r.classList.add("tp-ghost-label"),void(r.textContent=e.textContent)}t.innerHTML="",t.appendChild(e)},syncTraceGeometry=t=>{const e=t.querySelector(".tp-ghost-trace"),r=e&&e.querySelector(".tp-ghost-rect");if(!r)return;const o=getComputedStyle(t),n=Math.max(num(o.borderTopLeftRadius),num(o.borderTopRightRadius),num(o.borderBottomRightRadius),num(o.borderBottomLeftRadius)),s=t.getBoundingClientRect().height||40,i=Math.max(0,Math.min(20,n/s*40));r.setAttribute("rx",String(i)),r.setAttribute("ry",String(i));const a=r.getTotalLength();t.style.setProperty("--tp-ghost-len",String(a));const l=num(getComputedStyle(t).getPropertyValue("--tp-ghost-stroke-width"))||1.5;t.style.setProperty("--tp-ghost-stroke-px",l+"px");const u=n>=s/2-1;t.classList.toggle("tp-ghost-pill",u)},ghostify=t=>{t.setAttribute("data-ghostified","true"),t.classList.add("tp-ghost-btn");const e=getComputedStyle(t),r=e.borderTopColor||e.borderColor||e.color,o=e.color;t.style.setProperty("--tp-ghost-default-stroke",r),t.style.setProperty("--tp-ghost-default-arrow",o);const n=document.createElement("span");if(n.className="tp-ghost-label",n.textContent=getLabelText(t),setLabelNode(t,n),!t.querySelector(".tp-ghost-icon")){const e=document.createElement("span");e.className="tp-ghost-icon",e.setAttribute("aria-hidden","true");const r=document.createElement("span");r.className="tp-ghost-arrow",r.innerHTML=arrowSvg,e.appendChild(r),t.appendChild(e)}t.querySelector(".tp-ghost-trace")||t.appendChild(makeTraceSvg()),requestAnimationFrame((()=>syncTraceGeometry(t)))},run=()=>{document.querySelectorAll(SELECTOR).forEach(ghostify)},refreshAll=()=>{document.querySelectorAll("[data-ghostified].tp-ghost-btn").forEach(syncTraceGeometry)},boot=()=>{run();new MutationObserver((()=>run())).observe(document.body,{childList:!0,subtree:!0}),window.addEventListener("resize",(()=>requestAnimationFrame(refreshAll))),window.addEventListener("orientationchange",(()=>requestAnimationFrame(refreshAll))),setTimeout(refreshAll,250)};window.addEventListener("load",boot),window.addEventListener("mercury:load",(()=>{run(),setTimeout(refreshAll,250)}));
})();
</script>
<!-- END 01.26c22v2 Button Outline Draw -->
#2. Customize
All style here
:root{
--tp-ghost-icon-gap: 5px;
--tp-ghost-icon-reveal-width: 1.4em;
--tp-ghost-arrow-size: 0.9em;
--tp-ghost-stroke-width: 1.5;
--tp-ghost-stroke-primary: #fff;
--tp-ghost-arrow-primary: #fff;
--tp-ghost-stroke-secondary: #fff;
--tp-ghost-arrow-secondary: #fff;
--tp-ghost-stroke-tertiary: #fff;
--tp-ghost-arrow-tertiary: #fff;
}
#2.1. Arrow Style
To change arrow size, change this.
--tp-ghost-arrow-size: 0.9em;
To change arrow color, change this
--tp-ghost-arrow-primary: #fff; --tp-ghost-arrow-secondary: #fff; --tp-ghost-arrow-tertiary: #fff;
To change space between arrow – text
--tp-ghost-icon-gap: 5px;
#2.2. Border line
To change border line color, change these
--tp-ghost-stroke-primary: #fff; --tp-ghost-stroke-secondary: #fff; --tp-ghost-stroke-tertiary: #fff;
To change border line height, change this
--tp-ghost-stroke-width: 1.5;
#2.3. Fix: outline doesn’t render properly on some sites
First, remove #1.2 code & use this new code to Code Injection > Footer (or Individual Page Header Injection)
<!-- 01.26c22v2 Button Outline Draw -->
<style>
:root{
--tp-ghost-icon-gap: 5px;
--tp-ghost-icon-reveal-width: 1.4em;
--tp-ghost-arrow-size: 0.9em;
--tp-ghost-stroke-width: 1.5;
--tp-ghost-stroke-primary: #fff;
--tp-ghost-arrow-primary: #fff;
--tp-ghost-stroke-secondary: #fff;
--tp-ghost-arrow-secondary: #fff;
--tp-ghost-stroke-tertiary: #fff;
--tp-ghost-arrow-tertiary: #fff;
--tp-ghost-vb-w: 335;
--tp-ghost-vb-h: 70;
}
.tp-ghost-btn{position:relative!important;overflow:hidden!important;--tp-ghost-len:0;--tp-ghost-nudge:0px;--tp-ghost-y:0px}.tp-ghost-label{position:relative;z-index:2}.tp-ghost-icon{position:relative;z-index:2;display:inline-grid;place-items:center;width:0;height:1em;margin-left:var(--tp-ghost-icon-gap);overflow:hidden;opacity:0;transform:translateX(-6px);transition:opacity 0.35s cubic-bezier(.22,.61,.36,1),transform 0.4s cubic-bezier(.22,.61,.36,1),width 400ms cubic-bezier(.22,.61,.36,1)}.tp-ghost-arrow svg{width:var(--tp-ghost-arrow-size);height:var(--tp-ghost-arrow-size);color:var(--tp-ghost-arrow,var(--tp-ghost-default-arrow,currentColor));display:block}.tp-ghost-trace{position:absolute;inset:calc((var(--tp-ghost-stroke-px, 2px) * -0.5) - var(--tp-ghost-nudge))!important;width:calc(100% + var(--tp-ghost-stroke-px, 2px) + (var(--tp-ghost-nudge) * 2))!important;height:calc(100% + var(--tp-ghost-stroke-px, 2px) + (var(--tp-ghost-nudge) * 2))!important;transform:translateY(var(--tp-ghost-y))!important;transform-origin:center!important;fill:none;pointer-events:none}.tp-ghost-rect{fill:none;stroke:var(--tp-ghost-stroke,var(--tp-ghost-default-stroke,currentColor));stroke-width:var(--tp-ghost-stroke-width);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--tp-ghost-len);stroke-dashoffset:var(--tp-ghost-len);opacity:0;transition:stroke-dashoffset 850ms cubic-bezier(.22,.61,.36,1),opacity 0.2s ease}.tp-ghost-btn:hover .tp-ghost-icon{opacity:1;transform:translateX(0);width:var(--tp-ghost-icon-reveal-width)}.tp-ghost-btn:hover .tp-ghost-rect{stroke-dashoffset:0;opacity:1}.tp-ghost-btn.sqs-button-element--primary{--tp-ghost-stroke:var(--tp-ghost-stroke-primary);--tp-ghost-arrow:var(--tp-ghost-arrow-primary)}.tp-ghost-btn.sqs-button-element--secondary{--tp-ghost-stroke:var(--tp-ghost-stroke-secondary);--tp-ghost-arrow:var(--tp-ghost-arrow-secondary)}.tp-ghost-btn.sqs-button-element--tertiary{--tp-ghost-stroke:var(--tp-ghost-stroke-tertiary);--tp-ghost-arrow:var(--tp-ghost-arrow-tertiary)}.tp-ghost-btn.tp-ghost-pill{overflow:visible!important;--tp-ghost-nudge:2px;--tp-ghost-y:0px}
</style>
<script>
(() => {
"use strict";
const SELECTOR = [
'a.sqs-block-button-element:not([data-ghostified])',
'button.form-submit-button:not([data-ghostified])',
'button.newsletter-form-button:not([data-ghostified])',
'a.btn.btn--border:not([data-ghostified])'
].join(",");
const arrowSvg='\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" focusable="false">\n <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>\n </svg>\n ',makeTraceSvg=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=getComputedStyle(t),o=parseFloat(r.getPropertyValue("--tp-ghost-vb-w"))||100,n=parseFloat(r.getPropertyValue("--tp-ghost-vb-h"))||40;e.setAttribute("class","tp-ghost-trace"),e.setAttribute("viewBox",`0 0 ${o} ${n}`),e.setAttribute("preserveAspectRatio","none"),e.setAttribute("aria-hidden","true");const s=document.createElementNS("http://www.w3.org/2000/svg","rect");return s.setAttribute("class","tp-ghost-rect"),s.setAttribute("x","0.5"),s.setAttribute("y","0.5"),s.setAttribute("width",String(o-1)),s.setAttribute("height",String(n-1)),s.setAttribute("rx","10"),s.setAttribute("ry","10"),e.appendChild(s),e},num=t=>{const e=parseFloat(t);return Number.isFinite(e)?e:0},getLabelText=t=>{if(t.matches("button.form-submit-button")){const e=t.querySelector(".form-submit-button-label");return e?e.textContent.trim():t.textContent.trim()}if(t.matches("button.newsletter-form-button")){const e=t.querySelector(".newsletter-form-button-label");return e?e.textContent.trim():t.textContent.trim()}return t.textContent.trim()},setLabelNode=(t,e)=>{if(t.matches("button.form-submit-button")){const r=t.querySelector(".form-submit-button-label");if(r)return r.classList.add("tp-ghost-label"),void(r.textContent=e.textContent)}if(t.matches("button.newsletter-form-button")){const r=t.querySelector(".newsletter-form-button-label");if(r)return r.classList.add("tp-ghost-label"),void(r.textContent=e.textContent)}t.innerHTML="",t.appendChild(e)},syncTraceGeometry=t=>{const e=t.querySelector(".tp-ghost-trace"),r=e&&e.querySelector(".tp-ghost-rect");if(!r)return;const o=getComputedStyle(t),n=Math.max(num(o.borderTopLeftRadius),num(o.borderTopRightRadius),num(o.borderBottomRightRadius),num(o.borderBottomLeftRadius)),s=t.getBoundingClientRect().height||40,i=parseFloat(o.getPropertyValue("--tp-ghost-vb-h"))||40,a=Math.max(0,Math.min(i/2,n/s*i));r.setAttribute("rx",String(a)),r.setAttribute("ry",String(a));const l=r.getTotalLength();t.style.setProperty("--tp-ghost-len",String(l));const c=num(getComputedStyle(t).getPropertyValue("--tp-ghost-stroke-width"))||1.5;t.style.setProperty("--tp-ghost-stroke-px",c+"px");const u=n>=s/2-1;t.classList.toggle("tp-ghost-pill",u)},ghostify=t=>{t.setAttribute("data-ghostified","true"),t.classList.add("tp-ghost-btn");const e=getComputedStyle(t),r=e.borderTopColor||e.borderColor||e.color,o=e.color;t.style.setProperty("--tp-ghost-default-stroke",r),t.style.setProperty("--tp-ghost-default-arrow",o);const n=document.createElement("span");if(n.className="tp-ghost-label",n.textContent=getLabelText(t),setLabelNode(t,n),!t.querySelector(".tp-ghost-icon")){const e=document.createElement("span");e.className="tp-ghost-icon",e.setAttribute("aria-hidden","true");const r=document.createElement("span");r.className="tp-ghost-arrow",r.innerHTML=arrowSvg,e.appendChild(r),t.appendChild(e)}t.querySelector(".tp-ghost-trace")||t.appendChild(makeTraceSvg(t)),requestAnimationFrame((()=>syncTraceGeometry(t)))},run=()=>{document.querySelectorAll(SELECTOR).forEach(ghostify)},refreshAll=()=>{document.querySelectorAll("[data-ghostified].tp-ghost-btn").forEach(syncTraceGeometry)},boot=()=>{run();new MutationObserver((()=>run())).observe(document.body,{childList:!0,subtree:!0}),window.addEventListener("resize",(()=>requestAnimationFrame(refreshAll))),window.addEventListener("orientationchange",(()=>requestAnimationFrame(refreshAll))),setTimeout(refreshAll,250)};window.addEventListener("load",boot),window.addEventListener("mercury:load",(()=>{run(),setTimeout(refreshAll,250)}));
})();
</script>