3.6K views
CSSAdd prefixes
1.button { 2 display: flex; 3} 4 5.box { 6 width: 35px; 7 height: 40px; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 font-size: 15px; 12 font-weight: 700; 13 color: #fff; 14 transition: all .8s; 15 cursor: pointer; 16 position: relative; 17 background: rgb(58, 165, 253); 18 overflow: hidden; 19} 20 21.box:before { 22 content: "W"; 23 position: absolute; 24 top: 0; 25 background: #0f0f0f; 26 width: 100%; 27 height: 100%; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 transform: translateY(100%); 32 transition: transform .4s; 33} 34 35.box:nth-child(2)::before { 36 transform: translateY(-100%); 37 content: 'O'; 38} 39 40.box:nth-child(3)::before { 41 content: 'R'; 42} 43 44.box:nth-child(4)::before { 45 transform: translateY(-100%); 46 content: 'L'; 47} 48 49.box:nth-child(5)::before { 50 content: 'D'; 51} 52 53.button:hover .box:before { 54 transform: translateY(0); 55}
HTML
1<div class="button"> 2 <div class="box">H</div> 3 <div class="box">O</div> 4 <div class="box">V</div> 5 <div class="box">E</div> 6 <div class="box">R</div> 7</div>