10K views
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.icon svg { 82 width: 24px; 83 height: 24px; 84} 85 86.button:hover { 87 background: #6c18ff; 88} 89 90.button:hover .text { 91 top: -100%; 92} 93 94.button:hover .icon { 95 top: 0; 96} 97 98.button:hover:before,.button:hover:after { 99 opacity: 1; 100 visibility: visible; 101} 102 103.button:hover:after { 104 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); 105} 106 107.button:hover:before { 108 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); 109} 110
satyamchaudharydev
satyam
MIT License