Button by csemszepp

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