@import url(https://fonts.googleapis.com/css?family=Arimo);
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
background: #AEDCC0;
font-family: 'Arimo', sans-serif;
}
.container{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-oriend: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
width: 100vw;
text-align: center;
}
.container h1{
color: #373737;
}
.btn{
background: #F6FEAA;
width: 200px;
padding: 15px;
color: #373737;
font-weight: bold;
border-radius: 3em;
box-shadow: 1px 1px 17px #373737;
cursor: pointer;
text-align: center;
margin: 2em auto;
-webkit-transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.btn__progress{
padding: 5px;
width: 500px;
color: transparent;
}
.btn__progress--fill:after{
content: '';
margin: -25.9px -5px;
position: absolute;
display: block;
background: #FCE698;
padding: 0.98em;
border-radius: 3em;
-webkit-animation: fill 3.4s linear forwards;
animation: fill 3.4s linear forwards;
}
.btn__complete{
padding: 10px;
width: 42px;
color: transparent;
pointer-events: none;
}
.btn__complete:after{
font-family: FontAwesome;
content: "\f00c";
color: #373737;
margin: -18px 3px;
position: absolute;
display: block;
}
@-webkit-keyframes fill{
from{
width: 0;
}
to{
width: 470px;
}
}
@keyframes fill{
from{
width: 0;
}
to{
width: 470px;
}
}
0 Comments
(close)