1/* Hide the default checkbox */
2.container input {
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8
9.container {
10  display: block;
11  position: relative;
12  cursor: pointer;
13  font-size: 20px;
14  user-select: none;
15}
16
17/* Create a custom checkbox */
18.checkmark {
19  position: relative;
20  top: 0;
21  left: 0;
22  height: 3em;
23  width: 3em;
24  background-color: #171717;
25  border-radius: 10px;
26  transition: .2s ease-in-out;
27  z-index: 2;
28}
29
30.like {
31  position: relative;
32  font-size: 0.8em;
33  top: -3.5em;
34  text-align: center;
35  z-index: -1;
36}
37
38.icon {
39  margin: 0.2em;
40  fill: white;
41  transition: .4s ease-in-out;
42}
43
44.checkmark:hover {
45  background-color: white;
46}
47
48.checkmark:hover .icon {
49  fill: black;
50  transform: rotate(-8deg);
51  transform-origin: bottom left;
52}
53
54/* When the checkbox is checked, add a blue background */
55.container input:checked ~ .checkmark {
56  background-color: limegreen;
57}
58
59.container input:checked ~ .like {
60  animation: 0.6s up_3951;
61}
62
63.container input:checked ~ .checkmark .icon {
64  fill: white;
65  transform: none;
66  animation: 0.5s jump_3951;
67}
68
69/* Create the checkmark/indicator (hidden when not checked) */
70.checkmark:after {
71  content: "";
72  position: absolute;
73  display: none;
74}
75
76/* Show the checkmark when checked */
77.container input:checked ~ .checkmark:after {
78  display: block;
79}
80
81@keyframes up_3951 {
82  100% {
83    transform: translateY(-2em);
84  }
85}
86
87@keyframes jump_3951 {
88  50% {
89    transform-origin: center;
90    transform: translateY(-0.5em) rotate(-8deg);
91  }
92
93  100% {
94    transform-origin: center;
95    transform: translateY(0em);
96  }
97}