Button by KhaledMatalkah

1@keyframes floating {
2  0%, 100% {
3    transform: translateY(0);
4  }
5
6  50% {
7    transform: translateY(-5px);
8  }
9}
10
11@keyframes particles {
12  0% {
13    transform: translateZ(0, 0);
14    opacity: 1;
15  }
16
17  100% {
18    transform: translate(190px, 50px);
19    opacity: 0;
20  }
21}
22
23.button {
24  position: relative;
25  background: rgba(57, 57, 57, 0.7);
26  display: inline-block;
27  background-size: 200% auto;
28  border: 1px solid;
29  border-radius: 25px;
30  color: white;
31  padding: 10px 20px;
32  font-size: 18px;
33  text-transform: uppercase;
34  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
35  animation: floating 3s ease-in-out infinite;
36  transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
37}
38
39.button::before {
40  content: "";
41  position: absolute;
42  top: -5px;
43  left: -5px;
44  right: -5px;
45  bottom: -5px;
46  border-radius: 30px;
47  box-shadow: 0 0 20px #FF7730;
48  opacity: 0;
49  pointer-events: none;
50  transition: opacity 0.3s ease;
51  width: 5px;
52  height: 5px;
53  background: #FF7730;
54  animation: particles 2s infinite;
55}
56
57.button::after {
58  content: "";
59  position: absolute;
60  top: 50%;
61  left: 50%;
62  transform: translate(-50%, -50%);
63}
64
65.button:hover {
66  color: #FFB900;
67  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
68  transform: scale(1.05);
69  background-position: right center;
70  background: linear-gradient(to right, #FFB900, #FF7730);
71  -webkit-background-clip: text;
72  -webkit-text-fill-color: transparent;
73}