Switch by TroyRandall

1/* The switch - the box around the slider */
2.comment-react {
3  margin: 0;
4  display: flex;
5  justify-content: center;
6  padding: 5px;
7  background-color: #f1f1f1;
8  border-radius: 5px;
9  scale: 1.5;
10  width: 100px;
11}
12
13.comment-react button {
14  width: 35px;
15  height: 35px;
16  position: relative;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  background-color: transparent;
21  border: 0;
22  outline: none;
23}
24
25.comment-react button:after {
26  content: "";
27  width: 40px;
28  height: 40px;
29  position: absolute;
30  left: -3px;
31  top: -3px;
32  background-color: #f5356e;
33  border-radius: 50%;
34  z-index: 0;
35  transform: scale(0);
36}
37
38.comment-react button svg {
39  position: relative;
40  z-index: 9;
41}
42
43.comment-react button:hover:after {
44  animation: ripple 0.6s ease-in-out forwards;
45}
46
47.comment-react button:hover svg {
48  fill: #f5356e;
49}
50
51.comment-react button:hover svg path {
52  stroke: #f5356e;
53  fill: #f5356e;
54}
55
56.comment-react hr {
57  width: 80%;
58  height: 1px;
59  background-color: #dfe1e6;
60  margin: auto;
61  border: 0;
62}
63
64.comment-react span {
65  height: 35px;
66  display: flex;
67  align-items: center;
68  justify-content: center;
69  margin: auto;
70  font-size: 20px;
71  font-weight: 600;
72  color: #707277;
73  padding-right: 10px;
74  text-align: center;
75}
76
77@keyframes ripple {
78  0% {
79    transform: scale(0);
80    opacity: 0.6;
81  }
82
83  100% {
84    transform: scale(2);
85    opacity: 0;
86  }
87}
88