Button by BurgiSimon

1.button {
2  cursor: pointer;
3  padding: 10px 20px;
4  border-radius: 20px;
5  background-color: #e8e8e8;
6  border: 1.6px solid #e2e2e2;
7  box-shadow: 6px 6px 10px #c5c5c5, -6px -6px 12px #ffffff;
8  transform: skewX(-5deg);
9  position: relative;
10  overflow: hidden;
11}
12
13.button::before {
14  content: "";
15  position: absolute;
16  top: -4px;
17  left: -4px;
18  right: -4px;
19  bottom: -4px;
20  z-index: -1;
21  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
22  background-size: 400%;
23  border-radius: 30px;
24  opacity: 0;
25  transition: opacity 0.5s, filter 0.5s;
26}
27
28.button:hover::before {
29  filter: blur(10px);
30  opacity: 1;
31  animation: animateBorder 8s linear infinite;
32  border: 4px solid rgb(255, 255, 255);
33}
34
35@keyframes animateBorder {
36  0% {
37    background-position: 0%;
38  }
39  100% {
40    background-position: 400%;
41  }
42}
43
44.span {
45  color: black;
46  letter-spacing: 3px;
47  font-size: 18px;
48}
49
50.button:active {
51  box-shadow: 5px 5px 12px #cfcece, -4px -4px 12px #fcfcfc;
52}
53