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