.codepen-button{cursor:pointer;color:#fff;isolation:isolate;border-radius:6px;margin:0 auto;padding:2px;font-weight:600;text-decoration:none;display:block;position:relative;overflow:hidden}.codepen-button:before{content:"";background:linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b) 0 0/25% 100%;width:400%;height:100%;transition:translate .25s ease-out;animation:.75s linear infinite paused an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop;position:absolute;top:0;left:0;translate:-5%}.codepen-button:hover:before{transition-duration:.75s;animation-play-state:running;translate:0%}@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop{to{transform:translate(-25%)}}.codepen-button span{direction:rtl;background:#000;border-radius:3px;justify-content:center;align-items:center;gap:.4rem;height:100%;padding:.5rem .9rem;font-size:1.1rem;display:flex;position:relative}