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: linear-gradient(to bottom right, #3598f5, blue);
33  border-radius: 50%;
34  z-index: 0;
35  transform: scale(0);
36  filter: blur(10px);
37}
38
39.comment-react button svg {
40  position: relative;
41  z-index: 9;
42}
43
44.comment-react button:hover:after {
45  animation: ripple 0.6s ease-in-out infinite;
46}
47
48.comment-react button:hover svg {
49  animation: ripple2 1s ease-in-out infinite;
50  fill: #f5356e;
51}
52
53.comment-react button:hover svg path {
54  stroke: #f5356e;
55  fill: #f5356e;
56}
57
58.comment-react hr {
59  width: 80%;
60  height: 1px;
61  background-color: #dfe1e6;
62  margin: auto;
63  border: 0;
64}
65
66.comment-react span {
67  height: 35px;
68  display: flex;
69  align-items: center;
70  justify-content: center;
71  margin: auto;
72  font-size: 20px;
73  font-weight: 600;
74  color: #707277;
75  padding-right: 10px;
76  text-align: center;
77}
78
79@keyframes ripple {
80  0% {
81    transform: scale(0);
82    opacity: 1;
83  }
84
85  100% {
86    transform: scale(1.3);
87    opacity: 0.3;
88  }
89}
90
91@keyframes ripple2 {
92  0% {
93    transform: scale(0);
94    opacity: 1;
95  }
96
97  100% {
98    transform: scale(1.6);
99    opacity: 1;
100  }
101}
102