#e8e8e8
1.uiverse { 2 position: relative; 3 background: #ffffff; 4 color: #000; 5 padding: 15px; 6 margin: 10px; 7 border-radius: 10px; 8 width: 150px; 9 height: 50px; 10 font-size: 17px; 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 flex-direction: column; 15 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 16 cursor: pointer; 17 transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 18} 19 20.tooltip { 21 position: absolute; 22 top: 0; 23 font-size: 14px; 24 background: #ffffff; 25 color: #ffffff; 26 padding: 5px 8px; 27 border-radius: 5px; 28 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 29 opacity: 0; 30 pointer-events: none; 31 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 32} 33 34.tooltip::before { 35 position: absolute; 36 content: ""; 37 height: 8px; 38 width: 8px; 39 background: #ffffff; 40 bottom: -3px; 41 left: 50%; 42 transform: translate(-50%) rotate(45deg); 43 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 44} 45 46.uiverse:hover .tooltip { 47 top: -45px; 48 opacity: 1; 49 visibility: visible; 50 pointer-events: auto; 51} 52 53svg:hover span, 54svg:hover .tooltip { 55 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 56} 57 58.uiverse:hover, 59.uiverse:hover .tooltip, 60.uiverse:hover .tooltip::before { 61 background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255)); 62 color: #ffffff; 63}
Comments
MIT License