#212121
1.button { 2 cursor: pointer; 3 position: relative; 4 text-align: center; 5 display: block; 6 width: 200px; 7 border: none; 8 font-size: 12px; 9 height: 45px; 10 text-decoration: none; 11 font-weight: 600; 12 overflow: hidden; 13 box-shadow: 0 10px 50px #006eff; 14 border-radius: 10px; 15 padding: 10px 20px; 16} 17 18.button .ten { 19 line-height: 52px; 20} 21 22.button:hover .slidein { 23 left: 0%; 24} 25 26.button:hover .two { 27 left: 0%; 28 transition-delay: 1.5s; 29} 30 31.button:hover .three { 32 left: 0%; 33 transition-delay: 3s; 34} 35 36.button:hover .four { 37 left: 0%; 38 transition-delay: 4.5s; 39} 40 41.button:hover .five { 42 left: 0%; 43 transition-delay: 6s; 44} 45 46.button:hover .six { 47 left: 0%; 48 transition-delay: 7.5s; 49} 50 51.button:hover .seven { 52 left: 0%; 53 transition-delay: 9s; 54} 55 56.button:hover .eight { 57 left: 0%; 58 transition-delay: 10.5s; 59} 60 61.button:hover .nine { 62 left: 0%; 63 transition-delay: 12s; 64} 65 66.button:hover .ten { 67 left: 0%; 68 transition-delay: 14s; 69} 70 71.button .slidein { 72 background: #3398ff; 73 left: -100%; 74 z-index: 2; 75} 76 77.button a { 78 text-transform: uppercase; 79 transition: left 300ms; 80 display: flex; 81 align-items: center; 82 justify-content: center; 83 letter-spacing: 1px; 84 background: #006eff; 85 position: absolute; 86 font-weight: bold; 87 z-index: 1; 88 top: 0; 89 left: 0; 90 width: 100%; 91 height: 100%; 92 color: #fff; 93} 94 95.slidein:nth-child( even) { 96 background: #348bfc !important; 97} 98 99.slidein:nth-child( odd) { 100 background: #0873ff !important; 101}
1.4K views
1.4K views
Comments
MIT License