#212121
1.installer { 2 width: 200px; 3 height: 40px; 4} 5 6.installer label { 7 position: absolute; 8 height: 40px; 9 width: 200px; 10 border-radius: 5px; 11 overflow: hidden; 12 cursor: pointer; 13} 14 15.installer label input { 16 display: none; 17} 18 19.installer label span { 20 position: absolute; 21 height: 40px; 22 width: 200px; 23 line-height: 40px; 24 text-align: center; 25 color: #fff; 26 background: #3F8EFC; 27 border-radius: 5px; 28} 29 30.installer label input:checked ~ span { 31 background: #87E544; 32 animation: downloadSuccess 3.1s ease; 33} 34 35.installer label span:after { 36 content: 'DOWNLOAD'; 37 position: absolute; 38 width: 80%; 39 height: 100%; 40 left: 10%; 41} 42 43.installer label input:checked ~ span:after { 44 content: 'Thank you!'; 45 animation: downloadState 3s; 46} 47 48.installer label span:before { 49 content: ''; 50 position: absolute; 51 width: 100%; 52 height: 100%; 53 top: 0px; 54 left: 0px; 55 opacity: 0; 56 background: rgba(255,255,255,.2); 57} 58 59.installer label input:checked ~ span:before { 60 animation: downloadProgress 3s cubic-bezier(.67,.13,.1,.81); 61} 62 63@keyframes downloadSuccess { 64 0%, 90% { 65 background: #3F8EFC; 66 } 67 68 100% { 69 background: #87E544; 70 } 71} 72 73@keyframes downloadState { 74 0%, 95% { 75 content: 'DOWNLOADING...' 76 } 77 78 100% { 79 content: 'Thank you for download!' 80 } 81} 82 83@keyframes downloadProgress { 84 0% { 85 width: 5%; 86 opacity: 1; 87 } 88 89 35% { 90 width: 17%; 91 } 92 93 64% { 94 width: 51%; 95 } 96 97 81% { 98 width: 70%; 99 } 100 101 90% { 102 width: 86%; 103 opacity: 1; 104 } 105 106 100% { 107 width: 100%; 108 opacity: 0; 109 } 110}
Comments
MIT License