Button by A3zra
#212121
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 background-color: #E15331; 12 border-radius: 12px; 13 overflow: hidden; 14 transition: 31ms cubic-bezier(.5, .7, .4, 1); 15 width: 300px; 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 color: #E15331; 43} 44 45button i { 46 color: white; 47 font-size: 15px; 48 font-weight: bold; 49 letter-spacing: 4px; 50 font-style: normal; 51 transition: all 2s ease; 52 transform: translateY(-20px); 53 opacity: 0; 54} 55 56button:hover i { 57 transition: all .2s ease; 58 transform: translateY(0px); 59 opacity: 1; 60} 61 62button:hover i:nth-child(1) { 63 transition-delay: 0.045s; 64} 65 66button:hover i:nth-child(2) { 67 transition-delay: calc(0.045s * 3); 68} 69 70button:hover i:nth-child(3) { 71 transition-delay: calc(0.045s * 4); 72} 73 74button:hover i:nth-child(4) { 75 transition-delay: calc(0.045s * 5); 76} 77 78button:hover i:nth-child(6) { 79 transition-delay: calc(0.045s * 6); 80} 81 82button:hover i:nth-child(7) { 83 transition-delay: calc(0.045s * 7); 84} 85 86button:hover i:nth-child(8) { 87 transition-delay: calc(0.045s * 8); 88} 89 90button:hover i:nth-child(9) { 91 transition-delay: calc(0.045s * 9); 92} 93 94button:hover i:nth-child(10) { 95 transition-delay: calc(0.045s * 10); 96} 97
295 views
295 views
MIT License