Button by vinodjangid07
#212121
1.BugButton { 2 width: 40px; 3 height: 40px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 gap: 3px; 9 background-color: transparent; 10 border: none; 11 border-radius: 8px; 12 cursor: pointer; 13 transition: all 0.2s; 14 position: relative; 15 overflow: hidden; 16} 17.BugButton svg { 18 width: 44%; 19} 20.BugButton:hover { 21 background-color: rgb(61, 41, 71); 22 overflow: visible; 23} 24.bugsvg path { 25 transition: all 0.2s; 26} 27.BugButton:hover .bugsvg path { 28 stroke: #fff; 29} 30.BugButton:active { 31 transform: scale(0.98); 32} 33.tooltip { 34 --tooltip-color: rgb(41, 41, 41); 35 position: absolute; 36 top: -40px; 37 background-color: var(--tooltip-color); 38 color: white; 39 border-radius: 5px; 40 font-size: 12px; 41 padding: 8px 12px; 42 font-weight: 600; 43 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.105); 44 display: flex; 45 align-items: center; 46 justify-content: center; 47 opacity: 0; 48 transition: all 0.5s; 49 min-width: 100px; 50} 51.tooltip::before { 52 position: absolute; 53 width: 10px; 54 height: 10px; 55 transform: rotate(45deg); 56 content: ""; 57 background-color: var(--tooltip-color); 58 bottom: -10%; 59} 60.BugButton:hover .tooltip { 61 opacity: 1; 62} 63
325 views
325 views
MIT License