#e8e8e8
1button { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 height: 50px; 6 position: relative; 7 padding: 0 20px; 8 font-size: 18px; 9 text-transform: uppercase; 10 border: 0; 11 box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px; 12 background-color: hsl(210deg 100% 44%); 13 border-radius: 12px; 14 overflow: hidden; 15 transition: 31ms cubic-bezier(.5, .7, .4, 1); 16} 17 18button:before { 19 content: attr(alt); 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 position: absolute; 24 inset: 0; 25 font-size: 15px; 26 font-weight: bold; 27 color: white; 28 letter-spacing: 4px; 29 opacity: 1; 30} 31 32button:active { 33 box-shadow: none; 34 transform: translateY(7px); 35 transition: 35ms cubic-bezier(.5, .7, .4, 1); 36} 37 38button:hover:before { 39 transition: all .0s; 40 transform: translateY(100%); 41 opacity: 0; 42} 43 44button i { 45 color: white; 46 font-size: 15px; 47 font-weight: bold; 48 letter-spacing: 4px; 49 font-style: normal; 50 transition: all 2s ease; 51 transform: translateY(-20px); 52 opacity: 0; 53} 54 55button:hover i { 56 transition: all .2s ease; 57 transform: translateY(0px); 58 opacity: 1; 59} 60 61button:hover i:nth-child(1) { 62 transition-delay: 0.045s; 63} 64 65button:hover i:nth-child(2) { 66 transition-delay: calc(0.045s * 3); 67} 68 69button:hover i:nth-child(3) { 70 transition-delay: calc(0.045s * 4); 71} 72 73button:hover i:nth-child(4) { 74 transition-delay: calc(0.045s * 5); 75} 76 77button:hover i:nth-child(6) { 78 transition-delay: calc(0.045s * 6); 79} 80 81button:hover i:nth-child(7) { 82 transition-delay: calc(0.045s * 7); 83} 84 85button:hover i:nth-child(8) { 86 transition-delay: calc(0.045s * 8); 87} 88 89button:hover i:nth-child(9) { 90 transition-delay: calc(0.045s * 9); 91} 92 93button:hover i:nth-child(10) { 94 transition-delay: calc(0.045s * 10); 95}
Comments
MIT License