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