Description
- fix marquee button of SquareRefresh
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. Use this code to Code Injection > Header
<!-- Fix SquareRefresh - Marquee Button -->
<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>
<!-- END Fix SquareRefresh - Marquee Button-->
#1.2. Use this code to Code Injection > Footer
<!-- Fix SquareRefresh - Marquee Button -->
<script>
function _0x5230(){var _0x41bd9e=['hover','speed','querySelectorAll','#siteWrapper\x20','trace','apply','.marquee-button-row-inner','return\x20(function()\x20','1240992eTlKhl','search','exception','8760450GWfomS','5887956gDPBVO','marquee-button','beforeend','offsetWidth','sqs-add-to-cart-button','value','elements','cart-added','.sqs-add-to-cart-button-inner','1EUWoFt','__proto__','boolean','toString','length',',\x20.Site\x20','</span>','animationDuration','cart-adding','93205JOArNZ','77CyTREW','querySelector','click','bind','children','addEventListener','.newsletter-form-button-label','<button\x20id=\x22','760gNThCU','\x22\x20type=\x22submit\x22>','contains','console','isArray','body','header-skip-link','INPUT','number','296pxOEkb','innerHTML','</button>','No\x20options\x20passed\x20to\x20Marquee\x20Button\x20constructor','4470vlCXBW','{}.constructor(\x22return\x20this\x22)(\x20)','\x22\x20class=\x22','<span\x20class=\x22marquee-button-label\x22>','9124djrmEL','13941aDntso','load','log','info','warn','2243102KbeVYb','table','insertAdjacentHTML','forEach','classList','style','join-button','tagName','parentNode','add','.sqs-add-to-cart-button'];_0x5230=function(){return _0x41bd9e;};return _0x5230();}(function(_0x3297e5,_0x2e9ff7){var _0x41a731=_0x542a,_0x27f20b=_0x3297e5();while(!![]){try{var _0x4d47dd=parseInt(_0x41a731(0x204))/0x1*(-parseInt(_0x41a731(0x1e4))/0x2)+-parseInt(_0x41a731(0x1f7))/0x3+parseInt(_0x41a731(0x1de))/0x4*(parseInt(_0x41a731(0x1cd))/0x5)+-parseInt(_0x41a731(0x1fa))/0x6+-parseInt(_0x41a731(0x20d))/0x7*(parseInt(_0x41a731(0x1d6))/0x8)+parseInt(_0x41a731(0x1df))/0x9*(parseInt(_0x41a731(0x1da))/0xa)+-parseInt(_0x41a731(0x1c5))/0xb*(-parseInt(_0x41a731(0x1fb))/0xc);if(_0x4d47dd===_0x2e9ff7)break;else _0x27f20b['push'](_0x27f20b['shift']());}catch(_0x1314e4){_0x27f20b['push'](_0x27f20b['shift']());}}}(_0x5230,0xf0ad3));var _0x1f90ff=(function(){var _0x4f21f8=!![];return function(_0x15e1c8,_0x1bdf2b){var _0x231650=_0x4f21f8?function(){var _0x376ed4=_0x542a;if(_0x1bdf2b){var _0x300130=_0x1bdf2b[_0x376ed4(0x1f4)](_0x15e1c8,arguments);return _0x1bdf2b=null,_0x300130;}}:function(){};return _0x4f21f8=![],_0x231650;};}()),_0x4da2e1=_0x1f90ff(this,function(){var _0x188a6c=_0x542a;return _0x4da2e1[_0x188a6c(0x207)]()[_0x188a6c(0x1f8)]('(((.+)+)+)+$')[_0x188a6c(0x207)]()['constructor'](_0x4da2e1)['search']('(((.+)+)+)+$');});function _0x542a(_0x2ccb40,_0x286af2){var _0x378d40=_0x5230();return _0x542a=function(_0xae44b,_0x4ba6ee){_0xae44b=_0xae44b-0x1c5;var _0xba87d2=_0x378d40[_0xae44b];return _0xba87d2;},_0x542a(_0x2ccb40,_0x286af2);}_0x4da2e1();var _0x4ba6ee=(function(){var _0x502292=!![];return function(_0x41c979,_0x296077){var _0x20b30b=_0x502292?function(){var _0x48b50f=_0x542a;if(_0x296077){var _0x4f5e31=_0x296077[_0x48b50f(0x1f4)](_0x41c979,arguments);return _0x296077=null,_0x4f5e31;}}:function(){};return _0x502292=![],_0x20b30b;};}()),_0xae44b=_0x4ba6ee(this,function(){var _0x3896bb=_0x542a,_0x145fab;try{var _0x1889b4=Function(_0x3896bb(0x1f6)+_0x3896bb(0x1db)+');');_0x145fab=_0x1889b4();}catch(_0x3d138a){_0x145fab=window;}var _0x4c6968=_0x145fab[_0x3896bb(0x1d0)]=_0x145fab['console']||{},_0x5a25ab=[_0x3896bb(0x1e1),_0x3896bb(0x1e3),_0x3896bb(0x1e2),'error',_0x3896bb(0x1f9),_0x3896bb(0x1e5),_0x3896bb(0x1f3)];for(var _0x12899c=0x0;_0x12899c<_0x5a25ab[_0x3896bb(0x208)];_0x12899c++){var _0x4006df=_0x4ba6ee['constructor']['prototype']['bind'](_0x4ba6ee),_0x99ed50=_0x5a25ab[_0x12899c],_0xfc999d=_0x4c6968[_0x99ed50]||_0x4006df;_0x4006df[_0x3896bb(0x205)]=_0x4ba6ee['bind'](_0x4ba6ee),_0x4006df[_0x3896bb(0x207)]=_0xfc999d['toString'][_0x3896bb(0x1c8)](_0xfc999d),_0x4c6968[_0x99ed50]=_0x4006df;}});_0xae44b();function marqueeButton(_0x53c130){var _0x5ad321=_0x542a,_0x2c8984,_0x5a962a;if(!_0x53c130)throw new Error(_0x5ad321(0x1d9));if(!_0x53c130[_0x5ad321(0x201)]||!Array[_0x5ad321(0x1d1)](_0x53c130[_0x5ad321(0x201)])||0x0==_0x53c130[_0x5ad321(0x201)][_0x5ad321(0x208)])throw new Error('No\x20element\x20option\x20passed\x20to\x20Marquee\x20Button\x20constructor');function _0x15dd45(_0x10395a){var _0x3e636d=_0x5ad321,_0x5743de=_0x10395a[_0x3e636d(0x1d7)];_0x10395a[_0x3e636d(0x1d7)]=_0x3e636d(0x1dd)+_0x5743de+_0x3e636d(0x20a),_0x10395a[_0x3e636d(0x1e6)](_0x3e636d(0x1fd),'<div\x20class=\x22marquee-button-row\x22><div\x20class=\x22marquee-button-row-inner\x22></div><div\x20class=\x22marquee-button-row-inner\x22></div><div\x20class=\x22marquee-button-row-inner\x22></div></div>');for(var _0x188ca0=0x0;_0x188ca0<0x6;_0x188ca0++)_0x10395a['querySelectorAll'](_0x3e636d(0x1f5))['forEach'](function(_0x44b095){var _0x193565=_0x3e636d;_0x44b095[_0x193565(0x1e6)](_0x193565(0x1fd),'<span>'+_0x5743de+_0x193565(0x20a));});}_0x2c8984=_0x5ad321(0x206)!=typeof _0x53c130[_0x5ad321(0x1ef)]?_0x53c130[_0x5ad321(0x1ef)]=!0x0:_0x53c130[_0x5ad321(0x1ef)],_0x5a962a=_0x53c130[_0x5ad321(0x1f0)]&&_0x5ad321(0x1d5)==typeof _0x53c130[_0x5ad321(0x1f0)]?_0x53c130['speed']:_0x53c130[_0x5ad321(0x1f0)]=0x64,window[_0x5ad321(0x1ca)](_0x5ad321(0x1e0),function(){var _0x177c75=_0x5ad321;!(function(){var _0x19cdf5=_0x542a;for(var _0xd4442e=0x0;_0xd4442e<_0x53c130[_0x19cdf5(0x201)]['length'];_0xd4442e++)document[_0x19cdf5(0x1f1)](_0x19cdf5(0x1f2)+_0x53c130['elements'][_0xd4442e]+_0x19cdf5(0x209)+_0x53c130[_0x19cdf5(0x201)][_0xd4442e])[_0x19cdf5(0x1e7)](function(_0x4fdbbb){var _0x4abbe9=_0x19cdf5;if(!_0x4fdbbb['classList'][_0x4abbe9(0x1cf)](_0x4abbe9(0x1d3))){if(_0x4fdbbb[_0x4abbe9(0x1e8)][_0x4abbe9(0x1ed)](_0x4abbe9(0x1fc)),_0x2c8984&&_0x4fdbbb[_0x4abbe9(0x1e8)][_0x4abbe9(0x1ed)]('on-hover'),0x0==_0x4fdbbb[_0x4abbe9(0x1c9)]['length']&&_0x4abbe9(0x1d4)!=_0x4fdbbb[_0x4abbe9(0x1eb)])_0x15dd45(_0x4fdbbb);else{if(_0x4abbe9(0x1d4)==_0x4fdbbb[_0x4abbe9(0x1eb)]){var _0x14654c=_0x4fdbbb[_0x4abbe9(0x1ec)];_0x14654c[_0x4abbe9(0x1e6)]('beforeend',_0x4abbe9(0x1cc)+_0x4fdbbb['id']+_0x4abbe9(0x1dc)+_0x4fdbbb[_0x4abbe9(0x1e8)]['value']+_0x4abbe9(0x1ce)+_0x4fdbbb[_0x4abbe9(0x200)]+_0x4abbe9(0x1d8)),_0x4fdbbb['remove'](),_0x15dd45(_0x14654c[_0x4abbe9(0x1c6)]('.marquee-button'));}else _0x4fdbbb['classList'][_0x4abbe9(0x1cf)]('newsletter-form-button')?_0x15dd45(_0x4fdbbb[_0x4abbe9(0x1c6)](_0x4abbe9(0x1cb))):_0x4fdbbb[_0x4abbe9(0x1e8)][_0x4abbe9(0x1cf)](_0x4abbe9(0x1ea))?_0x15dd45(_0x4fdbbb[_0x4abbe9(0x1c6)](_0x4abbe9(0x203))):_0x4fdbbb['classList'][_0x4abbe9(0x1cf)](_0x4abbe9(0x1ff))&&_0x15dd45(_0x4fdbbb['querySelector'](_0x4abbe9(0x203)));}}});}()),function(_0x486b44){var _0x596404=_0x542a;for(var _0x2b3078=document[_0x596404(0x1f1)](_0x596404(0x1f5)),_0x520a6a=0x0;_0x520a6a<_0x2b3078['length'];_0x520a6a++){var _0x32aeb5=_0x2b3078[_0x520a6a][_0x596404(0x1fe)]/_0x486b44;_0x2b3078[_0x520a6a][_0x596404(0x1e9)][_0x596404(0x20b)]=_0x32aeb5+'s';}}(_0x5a962a),document[_0x177c75(0x1f1)](_0x177c75(0x1ee))[_0x177c75(0x1e7)](function(_0x4e50fb){var _0x228d06=_0x177c75;_0x4e50fb['addEventListener'](_0x228d06(0x1c7),function(){var _0x2fcc26=_0x228d06;_0x4e50fb[_0x2fcc26(0x1e8)]['remove'](_0x2fcc26(0x202));var _0x1b6a63=setInterval(function(){var _0x40564e=_0x2fcc26;if(!_0x4e50fb[_0x40564e(0x1e8)][_0x40564e(0x1cf)](_0x40564e(0x20c))&&_0x4e50fb[_0x40564e(0x1e8)][_0x40564e(0x1cf)](_0x40564e(0x202))){_0x15dd45(_0x4e50fb[_0x40564e(0x1c6)]('.sqs-add-to-cart-button-inner'));for(var _0x2a1bf0=_0x4e50fb[_0x40564e(0x1f1)]('.marquee-button-row-inner'),_0x29303e=0x0;_0x29303e<_0x2a1bf0[_0x40564e(0x208)];_0x29303e++){var _0x25e2fa=_0x2a1bf0[_0x29303e][_0x40564e(0x1fe)]/_0x5a962a;_0x2a1bf0[_0x29303e][_0x40564e(0x1e9)][_0x40564e(0x20b)]=_0x25e2fa+'s';}clearInterval(_0x1b6a63);}},0x64);});}),document[_0x177c75(0x1d2)][_0x177c75(0x1e8)][_0x177c75(0x1ed)]('marquee-button-loaded');});}
</script>
#2. Usage
#2.1. Use this code under main code in Code Injection > Footer
<script>
new marqueeButton({
elements: [".btn", ".sqs-button-element--primary"], // Final button class
hover: true, // Show marquee on hover - true or false
speed: 50, // Coef of speed. More high coef will increase marquee speed
});
</script>
Here I added code to make effect on Header Button and Primary Buttons
here are some IDs for other buttons
.sqs-block-button-element--large or .sqs-button-element--secondary - only Large buttons style; .sqs-block-button-element--medium - only Medium buttons style; .sqs-block-button-element--small or .sqs-button-element--tertiary - only Small buttons style; .image-button a - Image buttons; .newsletter-form-button - Newsletter block buttons; .sqs-add-to-cart-button - Add to cart button; .form-button-wrapper .sqs-editable-button - form button; .lightbox-handle - Lightbox form button