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  color: white;
61  animation: 0.6s up_3951;
62}
63
64.container input:checked ~ .checkmark .icon {
65  fill: white;
66  transform: none;
67  animation: 0.5s jump_3951;
68}
69
70/* Create the checkmark/indicator (hidden when not checked) */
71.checkmark:after {
72  content: "";
73  position: absolute;
74  display: none;
75}
76
77/* Show the checkmark when checked */
78.container input:checked ~ .checkmark:after {
79  display: block;
80}
81
82@keyframes up_3951 {
83  100% {
84    transform: translateY(-2em);
85  }
86}
87
88@keyframes jump_3951 {
89  50% {
90    transform-origin: center;
91    transform: translateY(-0.5em) rotate(-8deg);
92  }
93
94  100% {
95    transform-origin: center;
96    transform: translateY(0em);
97  }
98}