1.Btn {
2  width: 150px;
3  height: 50px;
4  border: none;
5  color: white;
6  font-weight: 600;
7  font-size: 13.5px;
8  position: relative;
9  overflow: hidden;
10  border-radius: 40px;
11  cursor: pointer;
12  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
13  background-size: 1000% 1000%;
14  animation: gradient 5s ease infinite;
15  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.247);
16  transition-duration: .1s;
17}
18/* Button's gradient animation */
19@keyframes gradient {
20  0% {
21    background-position: 0 50%;
22  }
23
24  50% {
25    background-position: 100% 50%;
26  }
27
28  100% {
29    background-position: 0 50%;
30  }
31}
32/* Effect on Hover*/
33.Btn::before {
34  content: "";
35  position: absolute;
36  width: 50px;
37  height: 100%;
38  left: -70px;
39  top: 0;
40  background-color: rgba(214, 199, 255, 0.329);
41  filter: blur(10px);
42  transition-duration: .3s;
43  border-top-left-radius: 50%;
44  border-bottom-right-radius: 50%;
45}
46
47.Btn:hover::before {
48  transform: translateX(250px);
49  transition-duration: .3s;
50}
51/* Effect on click */
52.Btn:active {
53  transform: translate(2px,2px);
54  transition-duration: .1s;
55}