1.Btn {
2  position: relative;
3  width: 150px;
4  height: 55px;
5  border-radius: 45px;
6  border: none;
7  background-color: rgb(151, 95, 255);
8  color: white;
9  box-shadow: 0px 10px 10px rgb(210, 187, 253) inset,
10  0px 5px 10px rgba(5, 5, 5, 0.212),
11  0px -10px 10px rgb(124, 54, 255) inset;
12  cursor: pointer;
13  display: flex;
14  align-items: center;
15  justify-content: center;
16}
17
18.Btn::before {
19  width: 70%;
20  height: 2px;
21  position: absolute;
22  background-color: rgba(250, 250, 250, 0.678);
23  content: "";
24  filter: blur(1px);
25  top: 7px;
26  border-radius: 50%;
27}
28
29.Btn::after {
30  width: 70%;
31  height: 2px;
32  position: absolute;
33  background-color: rgba(250, 250, 250, 0.137);
34  content: "";
35  filter: blur(1px);
36  bottom: 7px;
37  border-radius: 50%;
38}
39
40.Btn:hover {
41  animation: jello-horizontal 0.9s both;
42}
43
44@keyframes jello-horizontal {
45  0% {
46    transform: scale3d(1, 1, 1);
47  }
48
49  30% {
50    transform: scale3d(1.25, 0.75, 1);
51  }
52
53  40% {
54    transform: scale3d(0.75, 1.25, 1);
55  }
56
57  50% {
58    transform: scale3d(1.15, 0.85, 1);
59  }
60
61  65% {
62    transform: scale3d(0.95, 1.05, 1);
63  }
64
65  75% {
66    transform: scale3d(1.05, 0.95, 1);
67  }
68
69  100% {
70    transform: scale3d(1, 1, 1);
71  }
72}
73