Infinite Scrolling Button

Widget

<div class="uk-navbar-item widget widget_custom_html" id="custom_html-3">

<div class="textwidget custom-html-widget"><div class="wt-navbar-sign"><button class="wt-btn wt-btn_sign" onclick="location.href='/contact/'" data-section-target="/contact/" data-cursor="-default"><span class="wt-btn_sign-bound"><span data-width="#fff" data-text="Contact">Contact</span></span></button></div>
</div>

</div>

CSS

.wt-btn_sign {
    height: 35px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
    font-size: 15px;
    letter-spacing: -.22px;
    cursor: pointer;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    white-space: nowrap;
    -webkit-transition: color .3s;
    -o-transition: color .3s;
    -moz-transition: color .3s;
    transition: color .3s;
    position: relative;
    display: inline-block;
    height: 46px;
    border: 1px solid #a6fcff;
    font-family: 'Montserrat';
    font-size: 17px;
    transition: 0.2s;
    width: 145px;
}

.wt-btn_sign:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit;
    background: rgb(166 252 255);
    -webkit-transition: background .4s,-webkit-transform 1s cubic-bezier(.19,1,.22,1);
    transition: background .4s,-webkit-transform 1s cubic-bezier(.19,1,.22,1);
    -o-transition: background .4s,-o-transform 1s cubic-bezier(.19,1,.22,1);
    -moz-transition: background .4s,transform 1s cubic-bezier(.19,1,.22,1),-moz-transform 1s cubic-bezier(.19,1,.22,1);
    transition: background .4s,transform 1s cubic-bezier(.19,1,.22,1);
    transition: background .4s,transform 1s cubic-bezier(.19,1,.22,1),-webkit-transform 1s cubic-bezier(.19,1,.22,1),-moz-transform 1s cubic-bezier(.19,1,.22,1),-o-transform 1s cubic-bezier(.19,1,.22,1);
}

.wt-btn_sign-bound {
    display: block;
    overflow: hidden;
    width: 144px;
    margin-left: -6px;
}

.wt-btn_sign-bound span {
    position: relative;
    display: inline-block;
}

.wt-btn_sign-bound span {
    padding: 0 21px;
    -webkit-animation: wt-btn_sign-marquee 2s linear infinite;
    -moz-animation: wt-btn_sign-marquee 2s linear infinite;
    -o-animation: wt-btn_sign-marquee 2s linear infinite;
    animation: wt-btn_sign-marquee 2s linear infinite;
}

.wt-btn_sign-bound span:after {
    content: attr(data-text);
    position: absolute;
    left: 100%;
    padding: 0 21px;
}

Keyframe Animations

@-webkit-keyframes wt-btn_sign-marquee{
		0%{-webkit-transform:translate3d(0,0,0);
			transform:translate3d(0,0,0)}
		100%{-webkit-transform:translate3d(-100%,0,0);
			transform:translate3d(-100%,0,0)}
			}

	@-moz-keyframes wt-btn_sign-marquee {
		0%{-moz-transform:translate3d(0,0,0);
			transform:translate3d(0,0,0)}
		100%{-moz-transform:translate3d(-100%,0,0);
			transform:translate3d(-100%,0,0)}
			}

	@-o-keyframes wt-btn_sign-marquee { 
		0%{transform:translate3d(0,0,0)}
		100%{transform:translate3d(-100%,0,0)}
		}

	@keyframes wt-btn_sign-marquee {
		0%{-webkit-transform:translate3d(0,0,0);
			-moz-transform:translate3d(0,0,0);
			transform:translate3d(0,0,0)
			}
		100%{-webkit-transform:translate3d(-100%,0,0);
			-moz-transform:translate3d(-100%,0,0);
			transform:translate3d(-100%,0,0)}
		}

@-webkit-keyframes wt-outro-contact-link-hover{
	0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left center;transform-origin:left center}
	100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:left center;transform-origin:left center}}


@-moz-keyframes wt-outro-contact-link-hover{
	0%{-moz-transform:scaleX(0);transform:scaleX(0);
		-moz-transform-origin:left center;
		transform-origin:left center}
	100%{-moz-transform:scaleX(1);transform:scaleX(1);
		-moz-transform-origin:left center;transform-origin:left center}
		}

@-o-keyframes wt-outro-contact-link-hover{
	0%{-o-transform:scaleX(0);
		transform:scaleX(0);
		-o-transform-origin:left center;
		transform-origin:left center}
	100%{-o-transform:scaleX(1);
		transform:scaleX(1);
		-o-transform-origin:left center;
		transform-origin:left center}}

@keyframes wt-outro-contact-link-hover{
	0%{-webkit-transform:scaleX(0);
		-moz-transform:scaleX(0);
		-o-transform:scaleX(0);
		transform:scaleX(0);
		-webkit-transform-origin:left center;
		-moz-transform-origin:left center;
		-o-transform-origin:left center;
		transform-origin:left center}
	100%{-webkit-transform:scaleX(1);
		-moz-transform:scaleX(1);
		-o-transform:scaleX(1);
		transform:scaleX(1);
		-webkit-transform-origin:left center;
		-moz-transform-origin:left center;
		-o-transform-origin:left center;
		transform-origin:left center}}