Button by KINGFRESS
#e8e8e8
1button { 2 font-weight: bold; 3 color: white; 4 border-radius: 2rem; 5 cursor: pointer; 6 width: 95.02px; 7 height: 42.66px; 8 border: none; 9 background-color: #3653f8; 10 display: flex; 11 justify-content: center; 12 align-items: center; 13} 14 15button .span-mother { 16 display: flex; 17 overflow: hidden; 18} 19 20button:hover .span-mother { 21 position: absolute; 22} 23 24button:hover .span-mother span { 25 transform: translateY(1.2em); 26} 27 28button .span-mother span:nth-child(1) { 29 transition: 0.2s; 30} 31 32button .span-mother span:nth-child(2) { 33 transition: 0.3s; 34} 35 36button .span-mother span:nth-child(3) { 37 transition: 0.4s; 38} 39 40button .span-mother span:nth-child(4) { 41 transition: 0.5s; 42} 43 44button .span-mother span:nth-child(5) { 45 transition: 0.6s; 46} 47 48button .span-mother span:nth-child(6) { 49 transition: 0.7s; 50} 51 52button .span-mother2 { 53 display: flex; 54 position: absolute; 55 overflow: hidden; 56} 57 58button .span-mother2 span { 59 transform: translateY(-1.2em); 60} 61 62button:hover .span-mother2 span { 63 transform: translateY(0); 64} 65 66button .span-mother2 span { 67 transition: 0.2s; 68} 69 70button .span-mother2 span:nth-child(2) { 71 transition: 0.3s; 72} 73 74button .span-mother2 span:nth-child(3) { 75 transition: 0.4s; 76} 77 78button .span-mother2 span:nth-child(4) { 79 transition: 0.5s; 80} 81 82button .span-mother2 span:nth-child(5) { 83 transition: 0.6s; 84} 85 86button .span-mother2 span:nth-child(6) { 87 transition: 0.7s; 88} 89
11K views
11K views
MIT License