#e8e8e8
1.tooltip-container { 2 height: 70px; 3 width: 110px; 4 border-radius: 5px; 5 background-color: #fff; 6 background-image: linear-gradient( 7 to left bottom, 8 #f2f5f8, 9 #ecf1f2, 10 #e7eceb, 11 #e3e7e4, 12 #e1e2de 13 ); 14 border: 1px solid white; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 cursor: pointer; 19 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151); 20 position: relative; 21 transition: transform 0.3s ease; 22} 23 24.tooltip-container::before { 25 position: absolute; 26 content: ""; 27 top: -50%; 28 clip-path: polygon(50% 0, 0 100%, 100% 100%); 29 border-radius: 5px; 30 background-color: fff; 31 background-image: linear-gradient( 32 to left bottom, 33 #f2f5f8, 34 #e4eaec, 35 #d8dfde, 36 #cdd3cf, 37 #c5c7c1 38 ); 39 width: 100%; 40 height: 50%; 41 transform-style: preserve-3d; 42 transform: perspective(1000px) rotateX(-150deg) translateY(-110%); 43 transition: transform 0.3s ease; 44} 45 46.tooltip-container .text { 47 color: rgb(32, 30, 30); 48 font-weight: bold; 49 font-size: 40px; 50} 51 52.tooltip { 53 position: absolute; 54 top: -20px; 55 opacity: 0; 56 background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 1px, white 1px), 57 linear-gradient(rgba(0, 0, 0, 0.05) 1px, white 1px), 58 linear-gradient(-90deg, rgba(0, 0, 0, 0.04) 1px, white 1px), 59 linear-gradient(rgba(0, 0, 0, 0.04) 1px, white 1px), 60 linear-gradient(white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px), 61 linear-gradient(-90deg, #aaa 1px, white 1px), 62 linear-gradient(-90deg, white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px), 63 linear-gradient(#aaa 1px, white 1px), #f2f2f2; 64 background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 65 80px 80px, 80px 80px; 66 padding: 5px 10px; 67 border: 1px solid rgb(206, 204, 204); 68 69 height: 70px; 70 width: 110px; 71 border-radius: 5px; 72 display: flex; 73 align-items: center; 74 justify-content: center; 75 transition-duration: 0.2s; 76 pointer-events: none; 77 letter-spacing: 0.5px; 78 font-size: 18px; 79 font-weight: 600; 80 text-shadow: 10px salmon; 81} 82.tooltip-container:hover { 83 border-top-left-radius: 0; 84 border-top-right-radius: 0; 85} 86 87.tooltip-container:hover::before { 88 transform: rotateY(0); 89 background-image: none; 90 background-color: white; 91} 92 93.tooltip-container:hover .tooltip { 94 top: -90px; 95 opacity: 1; 96 transition-duration: 0.3s; 97} 98
197 views
197 views
Comments
MIT License