Button by vinodjangid07
#e8e8e8
1.bin-button { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 justify-content: center; 6 width: 55px; 7 height: 55px; 8 border-radius: 50%; 9 background-color: rgb(255, 95, 95); 10 cursor: pointer; 11 border: 2px solid rgb(255, 201, 201); 12 transition-duration: 0.3s; 13 position: relative; 14 overflow: hidden; 15} 16.bin-bottom { 17 width: 15px; 18 z-index: 2; 19} 20.bin-top { 21 width: 17px; 22 transform-origin: right; 23 transition-duration: 0.3s; 24 z-index: 2; 25} 26.bin-button:hover .bin-top { 27 transform: rotate(45deg); 28} 29.bin-button:hover { 30 background-color: rgb(255, 0, 0); 31} 32.bin-button:active { 33 transform: scale(0.9); 34} 35.garbage { 36 position: absolute; 37 width: 14px; 38 height: auto; 39 z-index: 1; 40 opacity: 0; 41 transition: all 0.3s; 42} 43.bin-button:hover .garbage { 44 animation: throw 0.4s linear; 45} 46@keyframes throw { 47 from { 48 transform: translate(-400%, -700%); 49 opacity: 0; 50 } 51 to { 52 transform: translate(0%, 0%); 53 opacity: 1; 54 } 55} 56
1.1K views
Variation of abutton
MIT License