galaxy/Buttons/Admin12121_lovely-cat-86.html

<button class="bin">🗑</button>
<div class="div">
  <small>
    <i></i>
  </small>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: delete, animated, 3d button */
.bin {
  --black: #000000;
  --binbg: #e6e6e6;
  --width: 40px;
  --height: 50px;
  background-image: repeating-linear-gradient(to right, transparent, transparent 5px, var(--black) 5px, var(--black) 7px, transparent 7px);
  background-size: 11px calc(var(--height) / 2);
  background-position: 2px center;
  background-repeat: repeat-x;
  margin: auto;
  position: relative;
  background-color: var(--binbg);
  border: 0;
  color: transparent;
  width: var(--width);
  height: var(--height);
  border: 2px solid var(--black);
  border-radius: 0 0 6px 6px;
}

.bin::after, .bin::before {
  content: "";
  position: absolute;
  transform-origin: left bottom;
  transition: 200ms ease-in-out;
  border-width: 2px;
  border-style: solid;
  margin: auto;
  right: 0;
}

.bin::after {
  left: -4px;
  top: -5px;
  height: 7px;
  width: var(--width);
  border: 2px solid var(--black);
  background-color: var(--binbg);
  border-radius: 5px 5px 0 0;
}

.bin::before {
  top: -8px;
  height: 2px;
  width: 10px;
  border-color: var(--black) var(--black) transparent var(--black);
  left: 0;
}

.bin:focus, .bin:active {
  outline: none;
  cursor: none;
}

.bin:focus::before, .bin:focus::after, .bin:active::before, .bin:active::after {
  transform-origin: left bottom;
  transform: rotate(-45deg);
}

.bin:focus::before, .bin:active::before {
  top: -18px;
  left: -23px;
  right: 3px;
}

.bin:focus ~ .div, .bin:active ~ .div {
  cursor: none;
  z-index: 1;
}

.bin:focus ~ .div:hover, .bin:active ~ .div:hover {
  cursor: none;
}

.bin:focus ~ .overlay, .bin:active ~ .overlay {
  pointer-events: inherit;
  z-index: 2;
  cursor: none;
}

.bin:focus ~ .div > small, .bin:active ~ .div > small {
  opacity: 1;
  animation: throw 300ms 30ms cubic-bezier(0.215, 0.61, 0.355, 0.3) forwards;
}

.div:focus, .div:active, .div:hover {
  z-index: 1;
  cursor: none;
}

.div > small {
  position: absolute;
  width: 20px;
  height: 16px;
  left: 0;
  right: -58px;
  margin: auto;
  top: 27px;
  bottom: 0;
  border-left: 1px solid black;
  opacity: 0;
}

.div > small::before, .div > small::after {
  content: "";
  position: absolute;
  width: 1px;
  border-right: 1px solid black;
}

.div > small::before {
  height: 17px;
  transform: rotate(-42deg);
  top: -3px;
  right: 13px;
}

.div > small::after {
  height: 4px;
  transform: rotate(-112deg);
  top: 18px;
  right: 11px;
}

.div > small > i::before, .div > small > i::after {
  content: "";
  position: absolute;
  border-top: 1px solid black;
}

.div > small > i::before {
  border-left: 1px solid black;
  width: 4px;
  bottom: -4px;
  height: 4px;
  transform: rotate(66deg);
}

.div > small > i::after {
  border-right: 1px solid black;
  width: 5px;
  bottom: -2px;
  height: 5px;
  transform: rotate(-114deg);
  right: 6px;
}

@keyframes throw {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -30px) rotate(-10deg);
  }

  60% {
    transform: translate(0, -40px) rotate(-30deg);
  }

  70% {
    transform: translate(-5px, -50px) rotate(-40deg) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(-10px, -60px) rotate(-60deg) scale(0.9);
    opacity: 1;
  }

  90% {
    transform: translate(-20px, -50px) rotate(-100deg) scale(0.5);
    opacity: 0.8;
  }

  100% {
    transform: translate(-30px, -20px) rotate(-80deg) scale(0.4);
    opacity: 0;
  }
}
</style>