Button by Mhdjd

1.container {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: space-around;
5  width: 200px;
6}
7
8.container .btn {
9  height: 50px;
10  margin: 20px;
11  margin-bottom: 40px;
12  position: relative;
13  width: 155px;
14}
15
16.container .btn a {
17  align-items: center;
18  background: rgba(255, 0, 255, 0.05);
19  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
20  border-top: 1px solid rgba(255, 255, 255, 0.1);
21  border-radius: 30px;
22  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
23  color: #fff;
24  display: flex;
25  font-size: 18px;
26  font-weight: 700;
27  left: 0;
28  top: 0;
29  position: absolute;
30  height: 100%;
31  width: 100%;
32  justify-content: center;
33  letter-spacing: 1px;
34  text-decoration: none;
35  overflow: hidden;
36  -webkit-backdrop-filter: blur(10px);
37  backdrop-filter: blur(15px);
38  z-index: 1;
39  transition: 0.5s;
40}
41
42.container .btn:hover a {
43  letter-spacing: 2px;
44}
45
46.container .btn a::before {
47  content: "";
48  position: absolute;
49  top: 0;
50  left: 0;
51  width: 50%;
52  height: 100%;
53  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
54  transform: skewX(45deg) translateX(0);
55  transition: 0.5s;
56}
57
58.container .btn:hover a::before {
59  transform: skewX(45deg) translateX(200%);
60}
61
62.container .btn::before {
63  content: "";
64  position: absolute;
65  left: 50%;
66  transform: translateX(-50%);
67  bottom: -5px;
68  height: 10px;
69  width: 30px;
70  background: rgb(8, 107, 183);
71  border-radius: 10px;
72  transition: 0.5s;
73  transition-delay: 0s;
74}
75
76.container .btn:hover::before {
77  bottom: 0;
78  height: 50%;
79  width: 80%;
80  border-radius: 30px;
81  transition-delay: 0.5s;
82}
83
84.container .btn::after {
85  content: "";
86  position: absolute;
87  left: 50%;
88  transform: translateX(-50%);
89  top: -5px;
90  height: 10px;
91  width: 30px;
92  background: rgb(7, 95, 189);
93  border-radius: 10px;
94  transition: 0.5s;
95  transition-delay: 0s;
96}
97
98.container .btn:hover::after {
99  top: 0;
100  height: 50%;
101  width: 80%;
102  border-radius: 30px;
103  transition-delay: 0.5s;
104}
105
106.container .btn:nth-child(1):before,
107.container .btn:nth-child(1)::after {
108  background: #ba55d3;
109  box-shadow: 0 0 5px #663399, 0 0 15px #ba55d3, 0 0 30px #663399,
110    0 0 60px #ff00ff;
111}
112
113.container .btn:active a {
114  color: #ba55d3;
115}
116