Button by VashonG

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, 255, 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,
54                rgba(255,255,255,0.15),
55                transparent);
56  transform: skewX(45deg) translateX(0);
57  transition: 0.5s;
58}
59
60.container .btn:hover a::before {
61  transform: skewX(45deg) translateX(200%);
62}
63
64.container .btn::before {
65  content: '';
66  position: absolute;
67  left: 50%;
68  transform: translateX(-50%);
69  bottom: -5px;
70  height: 10px;
71  width: 30px;
72  background: rgb(8, 107, 183);
73  border-radius: 10px;
74  transition: 0.5s;
75  transition-delay: 0s;
76}
77
78.container .btn:hover::before {
79  bottom: 0;
80  height: 50%;
81  width: 80%;
82  border-radius: 30px;
83  transition-delay: 0.5s;
84}
85
86.container .btn::after {
87  content: '';
88  position: absolute;
89  left: 50%;
90  transform: translateX(-50%);
91  top: -5px;
92  height: 10px;
93  width: 30px;
94  background: rgb(7, 95, 189);
95  border-radius: 10px;
96  transition: 0.5s;
97  transition-delay: 0s;
98}
99
100.container .btn:hover::after {
101  top: 0;
102  height: 50%;
103  width: 80%;
104  border-radius: 30px;
105  transition-delay: 0.5s;
106}
107
108.container .btn:nth-child(1):before,
109.container .btn:nth-child(1)::after {
110  background: #2bd2ff;
111  box-shadow: 0 0 5px #2bd2ff,
112    0 0 15px #2bd2ff,
113    0 0 30px #2bd2ff,
114    0 0 60px #2bd2ff;
115}
116
117.container .btn:active a {
118  color: #000;
119}
120