1.Btn {
2  width: 120px;
3  height: 45px;
4  background-color: rgb(65, 64, 64);
5  border: none;
6  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.342);
7  border-radius: 5px;
8  cursor: pointer;
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  gap: 7px;
13  position: relative;
14  overflow: hidden;
15  transition-duration: .5s;
16}
17
18.text {
19  color: rgb(184, 236, 104);
20  font-weight: 800;
21  letter-spacing: 1.1px;
22  z-index: 2;
23}
24
25.svgIcon {
26  z-index: 2;
27}
28
29.svgIcon path {
30  fill: rgb(184, 236, 104);
31}
32
33.Btn:hover {
34  color: rgb(230, 255, 193);
35}
36
37.effect {
38  position: absolute;
39  width: 10px;
40  height: 10px;
41  background-color: rgb(184, 236, 104);
42  border-radius: 50%;
43  z-index: 1;
44  opacity: 0;
45  transition-duration: .5s;
46}
47
48.Btn:hover .effect {
49  transform: scale(15);
50  transform-origin: center;
51  opacity: 1;
52  transition-duration: .5s;
53}
54
55.Btn:hover {
56  box-shadow: 0px 0px 5px rgb(184, 236, 104),
57  0px 0px 10px rgb(184, 236, 104),
58  0px 0px 30px rgb(184, 236, 104);
59  transition-duration: .7s;
60}
61
62.Btn:hover .text {
63  color: rgb(65, 64, 64);
64}
65
66.Btn:hover .svgIcon path {
67  fill: rgb(65, 64, 64);
68}