web-html5-scripts/buttons-and-toggles/download-button-animation/style.css

363 lines
7.2 KiB
CSS
Raw Normal View History

.button.dark-single {
--background: none;
--rectangle: #242836;
--success: #4BC793;
}
.button.white-single {
--background: none;
--rectangle: #F5F9FF;
--arrow: #275efe;
--success: #275efe;
--shadow: rgba(10, 22, 50, .1);
}
.button.dark {
--background: #242836;
--rectangle: #1C212E;
--arrow: #F5F9FF;
--text: #F5F9FF;
--success: #2F3545;
}
.button {
--background: #275efe;
--rectangle: #184fee;
--success: #4672f1;
--text: #fff;
--arrow: #fff;
--checkmark: #fff;
--shadow: rgba(10, 22, 50, .24);
display: flex;
overflow: hidden;
text-decoration: none;
-webkit-mask-image: -webkit-radial-gradient(white, black);
background: var(--background);
border-radius: 8px;
box-shadow: 0 2px 8px -1px var(--shadow);
transition: box-shadow .2s ease, -webkit-transform .2s ease;
transition: transform .2s ease, box-shadow .2s ease;
transition: transform .2s ease, box-shadow .2s ease, -webkit-transform .2s ease;
}
.button:active {
-webkit-transform: scale(0.95);
transform: scale(0.95);
box-shadow: 0 1px 4px -1px var(--shadow);
}
.button ul {
margin: 0;
padding: 16px 40px;
list-style: none;
text-align: center;
position: relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 16px;
font-weight: 500;
line-height: 28px;
color: var(--text);
}
.button ul li:not(:first-child) {
top: 16px;
left: 0;
right: 0;
position: absolute;
}
.button ul li:nth-child(2) {
top: 76px;
}
.button ul li:nth-child(3) {
top: 136px;
}
.button > div {
position: relative;
width: 60px;
height: 60px;
background: var(--rectangle);
}
.button > div:before, .button > div:after {
content: '';
display: block;
position: absolute;
}
.button > div:before {
border-radius: 1px;
width: 2px;
top: 50%;
left: 50%;
height: 17px;
margin: -9px 0 0 -1px;
background: var(--arrow);
}
.button > div:after {
width: 60px;
height: 60px;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
border-radius: 0 0 80% 80%;
background: var(--success);
top: 0;
left: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.button > div svg {
display: block;
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin: -9px 0 0 -10px;
fill: none;
z-index: 1;
stroke-width: 2px;
stroke: var(--arrow);
stroke-linecap: round;
stroke-linejoin: round;
}
.button.loading ul {
-webkit-animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div:before {
-webkit-animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div:after {
-webkit-animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div svg {
-webkit-animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
@-webkit-keyframes text {
10%,
85% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
95%,
100% {
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
}
@keyframes text {
10%,
85% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
95%,
100% {
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
}
@-webkit-keyframes line {
5%,
10% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
65% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
75%,
100% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
}
@keyframes line {
5%,
10% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
65% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
75%,
100% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
}
@-webkit-keyframes svg {
0%,
20% {
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
21%,
89% {
stroke-dasharray: 26px;
stroke-dashoffset: 26px;
stroke-width: 3px;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
100% {
stroke-dasharray: 26px;
stroke-dashoffset: 0;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
12% {
opacity: 1;
}
20%,
89% {
opacity: 0;
}
90%,
100% {
opacity: 1;
}
}
@keyframes svg {
0%,
20% {
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
21%,
89% {
stroke-dasharray: 26px;
stroke-dashoffset: 26px;
stroke-width: 3px;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
100% {
stroke-dasharray: 26px;
stroke-dashoffset: 0;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
12% {
opacity: 1;
}
20%,
89% {
opacity: 0;
}
90%,
100% {
opacity: 1;
}
}
@-webkit-keyframes background {
10% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
40% {
-webkit-transform: scaleY(0.15);
transform: scaleY(0.15);
}
65% {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
border-radius: 0 0 50% 50%;
}
75% {
border-radius: 0 0 50% 50%;
}
90%,
100% {
border-radius: 0;
}
75%,
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes background {
10% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
40% {
-webkit-transform: scaleY(0.15);
transform: scaleY(0.15);
}
65% {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
border-radius: 0 0 50% 50%;
}
75% {
border-radius: 0 0 50% 50%;
}
90%,
100% {
border-radius: 0;
}
75%,
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
font-family: 'Roboto', Arial;
justify-content: center;
align-items: center;
background: #E4ECFA;
}
body .container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .container > div {
flex-basis: 100%;
width: 0;
}
body .container .button {
margin: 16px;
}
@media (max-width: 400px) {
body .container .button {
margin: 12px;
}
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}