Button by vinodjangid07
#e8e8e8
1.button { 2 width: 50px; 3 height: 50px; 4 border-radius: 50%; 5 background-color: rgb(20, 20, 20); 6 border: none; 7 font-weight: 600; 8 display: flex; 9 flex-direction: column; 10 align-items: center; 11 justify-content: center; 12 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164); 13 cursor: pointer; 14 transition-duration: 0.3s; 15 overflow: hidden; 16 position: relative; 17 gap: 1px; 18} 19 20.svgIcon { 21 width: 12px; 22 transition-duration: 0.3s; 23} 24 25.svgIcon path { 26 fill: white; 27} 28 29.button:hover { 30 width: 140px; 31 border-radius: 50px; 32 transition-duration: 0.3s; 33 background-color: rgb(255, 69, 69); 34 align-items: center; 35 gap: 0; 36} 37 38.button:hover .bin-bottom { 39 width: 50px; 40 transition-duration: 0.3s; 41 transform: translateY(60%); 42} 43.bin-top { 44 transform-origin: bottom right; 45} 46.button:hover .bin-top { 47 width: 50px; 48 transition-duration: 0.3s; 49 transform: translateY(60%) rotate(160deg); 50} 51.button::before { 52 position: absolute; 53 top: -20px; 54 content: "Delete"; 55 color: white; 56 transition-duration: 0.3s; 57 font-size: 2px; 58} 59 60.button:hover::before { 61 font-size: 13px; 62 opacity: 1; 63 transform: translateY(35px); 64 transition-duration: 0.3s; 65} 66
598 views
Variation of abutton
MIT License