Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
button
<div class="bigpadding">
<button class="wt-btn_sign"><span class="wt-btn_sign-bound"><span data-width="#fff" data-text="Download ⭳">Download ⭳</span></span></button>
</div>
body{
display: flex;
justify-content: center;
align-items: center;
background: #1C212E;
}
.bigpadding{
padding: 250px;
}
.wt-btn_sign {
font-size: 23px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
letter-spacing: -.21px;
white-space: nowrap;
-webkit-transition: color .3s;
-o-transition: color .3s;
-moz-transition: color .3s;
transition: color .3s;
line-height: 20px;
color: #f6416c;
background: #ffde7d;
border: none;
height: 45px;
padding: 0 5px;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
}
.wt-btn_sign:hover {
color: #ffde7d;
background: #f6416c;
}
.wt-btn_sign-bound {
display: block;
overflow: hidden;
}
.wt-btn_sign-bound span {
position: relative;
display: inline-block;
padding:0 22px;
-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 23px;
}
@-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)
}
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.