8.2K views
CSSAdd prefixes
1.button { 2 --width: 100px; 3 --height: 35px; 4 --tooltip-height: 35px; 5 --tooltip-width: 90px; 6 --gap-between-tooltip-to-button: 18px; 7 --button-color: #1163ff; 8 --tooltip-color: #fff; 9 width: var(--width); 10 height: var(--height); 11 background: var(--button-color); 12 position: relative; 13 text-align: center; 14 border-radius: 0.45em; 15 font-family: "Arial"; 16 transition: background 0.3s; 17} 18 19.button::before { 20 position: absolute; 21 content: attr(data-tooltip); 22 width: var(--tooltip-width); 23 height: var(--tooltip-height); 24 background-color: var(--tooltip-color); 25 font-size: 0.9rem; 26 color: #111; 27 border-radius: .25em; 28 line-height: var(--tooltip-height); 29 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px); 30 left: calc(50% - var(--tooltip-width) / 2); 31} 32 33.button::after { 34 position: absolute; 35 content: ''; 36 width: 0; 37 height: 0; 38 border: 10px solid transparent; 39 border-top-color: var(--tooltip-color); 40 left: calc(50% - 10px); 41 bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px); 42} 43 44.button::after,.button::before { 45 opacity: 0; 46 visibility: hidden; 47 transition: all 0.5s; 48} 49 50.text { 51 display: flex; 52 align-items: center; 53 justify-content: center; 54} 55 56.button-wrapper,.text,.icon { 57 overflow: hidden; 58 position: absolute; 59 width: 100%; 60 height: 100%; 61 left: 0; 62 color: #fff; 63} 64 65.text { 66 top: 0 67} 68 69.text,.icon { 70 transition: top 0.5s; 71} 72 73.icon { 74 color: #fff; 75 top: 100%; 76 display: flex; 77 align-items: center; 78 justify-content: center; 79} 80 81.button:hover { 82 background: #6c18ff; 83} 84 85.button:hover .text { 86 top: -100%; 87} 88 89.button:hover .icon { 90 top: 0; 91} 92 93.button:hover:before,.button:hover:after { 94 opacity: 1; 95 visibility: visible; 96} 97 98.button:hover:after { 99 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); 100} 101 102.button:hover:before { 103 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); 104} 105
HTML
1<div data-tooltip="Size: 20Mb" class="button"> 2<div class="button-wrapper"> 3 <div class="text">Download</div> 4 <span class="icon"> 5 <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" height="2em" width="2em" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none"></path></svg> 6 </span> 7 </div> 8</div>