Card by Li-Deheng

1.like-dislike-container {
2  --dark-grey: #e9e9e9;
3  --middle-grey: #e0e0e0;
4  --lightest-grey: linear-gradient(#3b3b3b,#313131);
5  --shadow: 0 5px 15px 0 #00000026;
6  --shadow-active: 0 5px 5px 0 #00000026;
7  --border-radius-main: 10px;
8  --border-radius-icon: 50px;
9  position: relative;
10  display: flex;
11  text-align: center;
12  flex-direction: column;
13  align-items: center;
14  cursor: default;
15  color: var(--dark-grey);
16  opacity: .9;
17  margin: auto;
18  padding: 1.5rem;
19  font-weight: 600;
20  background: var(--lightest-grey);
21  max-width: max-content;
22  border-radius: var(--border-radius-main);
23  box-shadow: var(--shadow);
24  transition: .2s ease all;
25}
26
27.like-dislike-container:hover {
28  box-shadow: var(--shadow-active);
29}
30
31.like-dislike-container .tool-box {
32  position: absolute;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  width: 2.5rem;
37  height: 2.5rem;
38  top: 0;
39  right: 0;
40  border-radius: var(--border-radius-main);
41}
42
43.like-dislike-container .btn-close {
44  display: flex;
45  align-items: center;
46  justify-content: center;
47  text-align: center;
48  width: .8rem;
49  height: .8rem;
50  color: transparent;
51  font-size: 0;
52  cursor: pointer;
53  background-color: #ff5f5f80;
54  border: none;
55  border-radius: var(--border-radius-main);
56  transition: .2s ease all;
57}
58
59.like-dislike-container .btn-close:hover {
60  width: 1rem;
61  height: 1rem;
62  font-size: 1rem;
63  color: #ffffff;
64  background-color: #ff5f5fcc;
65  box-shadow: var(--shadow-active);
66}
67
68.like-dislike-container .btn-close:active {
69  width: .9rem;
70  height: .9rem;
71  font-size: .9rem;
72  color: #ffffffde;
73  --shadow-btn-close: 0 3px 3px 0 #00000026;
74  box-shadow: var(--shadow-btn-close);
75}
76
77.like-dislike-container .text-content {
78  margin-bottom: 1rem;
79  font-size: 18px;
80  line-height: 1.6;
81  cursor: default;
82}
83
84.like-dislike-container .icons-box {
85  display: flex;
86}
87
88.like-dislike-container .icons {
89  position: relative;
90  display: flex;
91  justify-content: center;
92  align-items: center;
93  opacity: .6;
94  margin: 0 0.5rem;
95  cursor: pointer;
96  user-select: none;
97  border: 1px solid var(--middle-grey);
98  border-radius: var(--border-radius-icon);
99  transition: .2s ease all;
100}
101
102.like-dislike-container .icons:hover {
103  opacity: .9;
104  box-shadow: var(--shadow);
105}
106
107.like-dislike-container .icons:active {
108  opacity: .9;
109  box-shadow: var(--shadow-active);
110}
111
112.like-dislike-container .icons .btn-label {
113  display: flex;
114  justify-content: center;
115  align-items: center;
116  padding: 0 0.5rem;
117  cursor: pointer;
118  position: relative;
119}
120
121.like-dislike-container .like-text-content {
122  border-right: 0.1rem solid var(--dark-grey);
123  padding: 0 0.6rem 0 0.5rem;
124  pointer-events: none;
125}
126
127.like-dislike-container .dislike-text-content {
128  border-left: 0.1rem solid var(--dark-grey);
129  padding: 0 0.5rem 0 0.6rem;
130  pointer-events: none;
131}
132
133.like-dislike-container .icons .svgs {
134  width: 1.3rem;
135  fill: #fff;
136  box-sizing: content-box;
137  padding: 10px 10px;
138  transition: .2s ease all;
139}
140
141/* Hide the default checkbox */
142.like-dislike-container .icons .input-box {
143  position: absolute;
144  opacity: 0;
145  cursor: pointer;
146  height: 0;
147  width: 0;
148}
149
150.like-dislike-container .icons #icon-like-regular {
151  display: block;
152}
153
154.like-dislike-container .icons #icon-like-solid {
155  display: none;
156}
157
158.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {
159  animation: rotate-icon-like 0.7s ease-in-out both;
160}
161
162.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {
163  display: none;
164  animation: checked-icon-like 0.5s;
165}
166
167.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {
168  display: block;
169  animation: checked-icon-like 0.5s;
170}
171
172.like-dislike-container .icons #icon-dislike-regular {
173  display: block;
174  transform: rotate(180deg);
175}
176
177.like-dislike-container .icons #icon-dislike-solid {
178  display: none;
179  transform: rotate(180deg);
180}
181
182.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {
183  animation: rotate-icon-dislike 0.7s ease-in-out both;
184}
185
186.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {
187  display: none;
188  animation: checked-icon-dislike 0.5s;
189}
190
191.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {
192  display: block;
193  animation: checked-icon-dislike 0.5s;
194}
195
196.like-dislike-container .icons .fireworks {
197  transform: scale(0.4);
198}
199
200.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {
201  position: absolute;
202  width: 10px;
203  height: 10px;
204  right: 40px;
205  border-radius: 50%;
206  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
207  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
208  animation-duration: 1.25s, 1.25s, 6.25s;
209}
210
211.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {
212  position: absolute;
213  width: 10px;
214  height: 10px;
215  left: 40px;
216  border-radius: 50%;
217  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
218  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
219  animation-duration: 1.25s, 1.25s, 6.25s;
220}
221
222/* Shake Animation */
223@keyframes rotate-icon-like {
224  0% {
225    transform: rotate(0deg) translate3d(0, 0, 0);
226  }
227
228  25% {
229    transform: rotate(3deg) translate3d(0, 0, 0);
230  }
231
232  50% {
233    transform: rotate(-3deg) translate3d(0, 0, 0);
234  }
235
236  75% {
237    transform: rotate(1deg) translate3d(0, 0, 0);
238  }
239
240  100% {
241    transform: rotate(0deg) translate3d(0, 0, 0);
242  }
243}
244
245@keyframes rotate-icon-dislike {
246  0% {
247    transform: rotate(180deg) translate3d(0, 0, 0);
248  }
249
250  25% {
251    transform: rotate(183deg) translate3d(0, 0, 0);
252  }
253
254  50% {
255    transform: rotate(177deg) translate3d(0, 0, 0);
256  }
257
258  75% {
259    transform: rotate(181deg) translate3d(0, 0, 0);
260  }
261
262  100% {
263    transform: rotate(180deg) translate3d(0, 0, 0);
264  }
265}
266
267/* Checked Animation */
268@keyframes checked-icon-like {
269  0% {
270    transform: scale(0);
271    opacity: 0;
272  }
273
274  50% {
275    transform: scale(1.2) rotate(-10deg);
276  }
277}
278
279@keyframes checked-icon-dislike {
280  0% {
281    transform: scale(0) rotate(180deg);
282    opacity: 0;
283  }
284
285  50% {
286    transform: scale(1.2) rotate(170deg);
287  }
288}
289
290/* Fireworks Animation */
291@keyframes fireworks-position {
292  0%, 19.9% {
293    margin-top: 10%;
294    margin-left: 40%;
295  }
296
297  20%, 39.9% {
298    margin-top: 40%;
299    margin-left: 30%;
300  }
301
302  40%, 59.9% {
303    margin-top: 20%;
304    margin-left: 70%;
305  }
306
307  60%, 79.9% {
308    margin-top: 30%;
309    margin-left: 20%;
310  }
311
312  80%, 99.9% {
313    margin-top: 30%;
314    margin-left: 80%;
315  }
316}
317
318@keyframes fireworks-gravity {
319  to {
320    transform: translateY(200px);
321    opacity: 0;
322  }
323}
324
325@keyframes fireworks-bang {
326  to {
327    box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;
328  }
329}