Button by vinodjangid07
#e8e8e8
1.deleteButton { 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.deleteButton svg { 18 width: 44%; 19} 20.deleteButton:hover { 21 background-color: rgb(237, 56, 56); 22 overflow: visible; 23} 24.bin path { 25 transition: all 0.2s; 26} 27.deleteButton:hover .bin path { 28 fill: #fff; 29} 30.deleteButton: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} 50.tooltip::before { 51 position: absolute; 52 width: 10px; 53 height: 10px; 54 transform: rotate(45deg); 55 content: ""; 56 background-color: var(--tooltip-color); 57 bottom: -10%; 58} 59.deleteButton:hover .tooltip { 60 opacity: 1; 61} 62
677 views
677 views
MIT License