#1. First, use this code to Code Injection > Header
<!-- Marquee Button Square Refresh -->
<style>
body:not(.sqs-edit-mode) .sqs-button-element--primary{opacity:0;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}body:not(.sqs-edit-mode).marquee-button-loaded .sqs-button-element--primary{opacity:1}.marquee-button{position:relative}.marquee-button .sqs-add-to-cart-button-inner{-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.marquee-button-label{opacity:0;pointer-events:none}.marquee-button.on-hover .marquee-button-label{display:inline-block;opacity:1;-webkit-transition:opacity .1s;-o-transition:opacity .1s;-moz-transition:opacity .1s;transition:opacity .1s}.marquee-button.on-hover .marquee-button-row-inner,.marquee-button.on-hover:hover .marquee-button-label{opacity:0}.marquee-button-row{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;white-space:nowrap;width:100%}.marquee-button-row-inner{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:linear infinite marquee;-moz-animation:linear infinite marquee;-o-animation:linear infinite marquee;animation:linear infinite marquee;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;height:100%;position:relative;will-change:transform}.marquee-button-row-inner span{padding:0 .5rem;text-align:center}.marquee-button.on-hover:hover .marquee-button-row-inner{opacity:1;-webkit-transition:opacity .6s;-o-transition:opacity .6s;-moz-transition:opacity .6s;transition:opacity .6s}@-webkit-keyframes marquee{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translate(-100%);transform:translate(-100%)}}@-moz-keyframes marquee{0%{-moz-transform:translateX(0);transform:translateX(0)}100%{-moz-transform:translate(-100%);transform:translate(-100%)}}@-o-keyframes marquee{0%{-o-transform:translateX(0);transform:translateX(0)}100%{-o-transform:translate(-100%);transform:translate(-100%)}}@keyframes marquee{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translate(-100%);-moz-transform:translate(-100%);-o-transform:translate(-100%);transform:translate(-100%)}}
</style>
<!-- Marquee Button Square Refresh -->
#2. Next, use this code to Code Injection > Footer
<!-- Marquee Button Square Refresh -->
<script>
!function(){"use strict";window.marqueeButton=function(e){if(!e)throw new Error("No options passed to Marquee Button constructor");if(!e.elements||!Array.isArray(e.elements)||0===e.elements.length)throw new Error("No element option passed to Marquee Button constructor");const t="boolean"!=typeof e.hover||e.hover,n=e.speed&&"number"==typeof e.speed?e.speed:100;function o(e){const t=e.innerHTML;e.innerHTML='<span class="marquee-button-label">'+t+"</span>",e.insertAdjacentHTML("beforeend",'<div class="marquee-button-row"><div class="marquee-button-row-inner"></div><div class="marquee-button-row-inner"></div><div class="marquee-button-row-inner"></div></div>');const n=e.querySelectorAll(".marquee-button-row-inner");for(let e=0;e<6;e++)n.forEach((function(e){e.insertAdjacentHTML("beforeend","<span>"+t+"</span>")}))}function s(){console.log("Initializing marquee buttons..."),e.elements.forEach((function(e){const n=document.querySelectorAll(e);console.log("Found buttons for",e,":",n.length),n.forEach((function(e){if(!e.classList.contains("header-skip-link")&&!e.classList.contains("marquee-button"))if(console.log("Processing button:",e),e.classList.add("marquee-button"),t&&e.classList.add("on-hover"),0===e.children.length&&"INPUT"!==e.tagName)o(e);else if("INPUT"===e.tagName){const t=e.parentNode;t.insertAdjacentHTML("beforeend",'<button id="'+e.id+'" type="submit">'+e.classList.value+e.value+"</button>"),e.remove(),o(t.querySelector(".marquee-button"))}else e.classList.contains("newsletter-form-button")?o(e.querySelector(".newsletter-form-button-label")):e.classList.contains("sqs-add-to-cart-button")||e.classList.contains("join-button")?o(e.querySelector(".sqs-add-to-cart-button-inner")):o(e)}))})),function(e){const t=document.querySelectorAll(".marquee-button-row-inner");console.log("Setting speed for",t.length,"rows"),t.forEach((function(t){const n=t.offsetWidth/e;t.style.animationDuration=n+"s"}))}(n),document.querySelectorAll(".sqs-add-to-cart-button").forEach((function(e){e.addEventListener("click",(function(){e.classList.remove("cart-added");const t=setInterval((function(){!e.classList.contains("cart-adding")&&e.classList.contains("cart-added")&&(o(e.querySelector(".sqs-add-to-cart-button-inner")),e.querySelectorAll(".marquee-button-row-inner").forEach((function(e){const t=e.offsetWidth/n;e.style.animationDuration=t+"s"})),clearInterval(t))}),100)}))})),document.body.classList.add("marquee-button-loaded")}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",s):s(),window.addEventListener("load",s),window.addEventListener("mercury:load",s)}}();
</script>
<script>
new marqueeButton({
elements: [".sqs-button-element--primary", ".btn"],
hover: true,
speed: 50,
});
</script>
<!-- Marquee Button Square Refresh -->
#3. This code apply to Primary Button + Header button. To apply it to other buttons, you can follow Step Three in SquareRefresh Documentation Page.