Button by htwarriors108

1.button {
2  height: 50px;
3  width: 180px;
4  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
5  border-radius: 25px;
6  animation: animate 1.5s linear infinite;
7  border: none;
8  cursor: pointer;
9}
10
11.button, .display, #msg {
12  transition: 0.3s;
13}
14
15.button:active .display {
16  background: rgba(255, 255, 255, 0.5);
17}
18
19.button:active .display #msg {
20  -webkit-text-fill-color: #1b1b1b;
21}
22
23.button:hover {
24  scale: 1.15;
25  animation: animate 0.7s linear infinite;
26  transform: translateY(-15px);
27}
28
29.button .display, .button span {
30  position: absolute;
31  top: 50%;
32  left: 50%;
33  transform: translate(-50%, -50%);
34}
35
36.button .display {
37  z-index: 1;
38  background-color: #1b1b1b;
39  height: 42.5px;
40  width: 172.5px;
41  border-radius: 20px;
42  text-align: center;
43}
44
45.button .display #msg {
46  line-height: 42.5px;
47  font-size: 25px;
48  font-weight: 800;
49  letter-spacing: 3px;
50  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
51  -webkit-background-clip: text;
52  -webkit-text-fill-color: transparent;
53}
54
55@keyframes animate {
56  100% {
57    filter: hue-rotate(360deg);
58  }
59}
60
61.button span {
62  height: 100%;
63  width: 100%;
64  background: inherit;
65  border-radius: 25px;
66}
67
68.button span:first-child {
69  filter: blur(15px);
70}
71
72.button span:last-child {
73  filter: blur(15px);
74  transition: 0.3s;
75}
76
77.button:hover span:last-child {
78  width: 110%;
79  height: 120%;
80}