Button by Admin12121

1.bin {
2  --black: #000000;
3  --binbg: #e6e6e6;
4  --width: 40px;
5  --height: 50px;
6  background-image: repeating-linear-gradient(to right, transparent, transparent 5px, var(--black) 5px, var(--black) 7px, transparent 7px);
7  background-size: 11px calc(var(--height) / 2);
8  background-position: 2px center;
9  background-repeat: repeat-x;
10  margin: auto;
11  position: relative;
12  background-color: var(--binbg);
13  border: 0;
14  color: transparent;
15  width: var(--width);
16  height: var(--height);
17  border: 2px solid var(--black);
18  border-radius: 0 0 6px 6px;
19}
20
21.bin::after, .bin::before {
22  content: "";
23  position: absolute;
24  transform-origin: left bottom;
25  transition: 200ms ease-in-out;
26  border-width: 2px;
27  border-style: solid;
28  margin: auto;
29  right: 0;
30}
31
32.bin::after {
33  left: -4px;
34  top: -5px;
35  height: 7px;
36  width: var(--width);
37  border: 2px solid var(--black);
38  background-color: var(--binbg);
39  border-radius: 5px 5px 0 0;
40}
41
42.bin::before {
43  top: -8px;
44  height: 2px;
45  width: 10px;
46  border-color: var(--black) var(--black) transparent var(--black);
47  left: 0;
48}
49
50.bin:focus, .bin:active {
51  outline: none;
52  cursor: none;
53}
54
55.bin:focus::before, .bin:focus::after, .bin:active::before, .bin:active::after {
56  transform-origin: left bottom;
57  transform: rotate(-45deg);
58}
59
60.bin:focus::before, .bin:active::before {
61  top: -18px;
62  left: -23px;
63  right: 3px;
64}
65
66.bin:focus ~ .div, .bin:active ~ .div {
67  cursor: none;
68  z-index: 1;
69}
70
71.bin:focus ~ .div:hover, .bin:active ~ .div:hover {
72  cursor: none;
73}
74
75.bin:focus ~ .overlay, .bin:active ~ .overlay {
76  pointer-events: inherit;
77  z-index: 2;
78  cursor: none;
79}
80
81.bin:focus ~ .div > small, .bin:active ~ .div > small {
82  opacity: 1;
83  animation: throw 300ms 30ms cubic-bezier(0.215, 0.61, 0.355, 0.3) forwards;
84}
85
86.div:focus, .div:active, .div:hover {
87  z-index: 1;
88  cursor: none;
89}
90
91.div > small {
92  position: absolute;
93  width: 20px;
94  height: 16px;
95  left: 0;
96  right: -58px;
97  margin: auto;
98  top: 27px;
99  bottom: 0;
100  border-left: 1px solid black;
101  opacity: 0;
102}
103
104.div > small::before, .div > small::after {
105  content: "";
106  position: absolute;
107  width: 1px;
108  border-right: 1px solid black;
109}
110
111.div > small::before {
112  height: 17px;
113  transform: rotate(-42deg);
114  top: -3px;
115  right: 13px;
116}
117
118.div > small::after {
119  height: 4px;
120  transform: rotate(-112deg);
121  top: 18px;
122  right: 11px;
123}
124
125.div > small > i::before, .div > small > i::after {
126  content: "";
127  position: absolute;
128  border-top: 1px solid black;
129}
130
131.div > small > i::before {
132  border-left: 1px solid black;
133  width: 4px;
134  bottom: -4px;
135  height: 4px;
136  transform: rotate(66deg);
137}
138
139.div > small > i::after {
140  border-right: 1px solid black;
141  width: 5px;
142  bottom: -2px;
143  height: 5px;
144  transform: rotate(-114deg);
145  right: 6px;
146}
147
148@keyframes throw {
149  0% {
150    transform: translate(0, 0);
151  }
152
153  50% {
154    transform: translate(0, -30px) rotate(-10deg);
155  }
156
157  60% {
158    transform: translate(0, -40px) rotate(-30deg);
159  }
160
161  70% {
162    transform: translate(-5px, -50px) rotate(-40deg) scale(1);
163    opacity: 1;
164  }
165
166  80% {
167    transform: translate(-10px, -60px) rotate(-60deg) scale(0.9);
168    opacity: 1;
169  }
170
171  90% {
172    transform: translate(-20px, -50px) rotate(-100deg) scale(0.5);
173    opacity: 0.8;
174  }
175
176  100% {
177    transform: translate(-30px, -20px) rotate(-80deg) scale(0.4);
178    opacity: 0;
179  }
180}