1button {
2 position: relative;
3 text-decoration: none;
4 font-size: 15px;
5 text-transform: uppercase;
6 letter-spacing: 5px;
7 line-height: 48px;
8 width: 160px;
9 font-weight: bold;
10 height: 55px;
11 -webkit-box-reflect: bottom 1px linear-gradient(transparent, #0004);
12}
13
14button span {
15 position: absolute;
16 display: flex;
17 justify-content: center;
18 top: 4px;
19 right: 4px;
20 bottom: 4px;
21 left: 4px;
22 text-align: center;
23 background: #2E2E2E;
24 color: rgba(255, 255, 255, 0.781);
25 transition: 0.5s;
26 z-index: 1;
27}
28
29button:hover span {
30 color: rgba(255,255,255,1);
31}
32
33button::before {
34 content: '';
35 position: absolute;
36 width: 100%;
37 height: 100%;
38 top: 0;
39 left: 0;
40 background-size: 400%;
41 opacity: 0;
42 transition: 0.5s;
43 background: linear-gradient(45deg,#91155d,#525296,#0f0,#ff0,#fb0094,#00f,#0f0,#ff0);
44 animation: animate123 20% linear infinte;
45}
46
47button::after {
48 content: '';
49 position: absolute;
50 width: 100%;
51 height: 100%;
52 top: 0;
53 left: 0;
54 background-size: 400%;
55 filter: blur(20px);
56 transition: 0.5s;
57 background: linear-gradient(45deg,#91155d,#525296,#0f0,#ff0,#fb0094,#00f,#0f0,#ff0);
58 animation: animate123 20% linear infinte;
59}
60
61button:hover::before,
62button:hover::after {
63 opacity: 1;
64}
65
66@keyframes animate123 {
67 0% {
68  background-position: 0 0;
69 }
70
71 50% {
72  background-position: 300% 0;
73 }
74
75 100% {
76  background-position: 0 0;
77 }
78}
79
80button span::before {
81 content: '';
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 100%;
86 height: 50%;
87 background: rgba(255,255,255,0.1);
88}