Button by Shoh2008

1button {
2  font: 18px;
3  color: #fff;
4  text-decoration: none;
5  text-transform: uppercase;
6  padding: 5px 20px;
7  position: relative;
8  overflow: hidden;
9  border-radius: 5px;
10  transition: 0.2s;
11  transform: scale(2);
12  border: 1px solid;
13}
14
15button span {
16  position: relative;
17  z-index: 0;
18  display: flex;
19  color: #fff;
20}
21
22button .liquid {
23  position: absolute;
24  top: -50px;
25  left: 0;
26  width: 100%;
27  height: 150px;
28  background: #FF229F;
29  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
30  z-index: -1;
31  transition: 0.6s;
32}
33
34button .liquid::after,
35button .liquid::before {
36  position: absolute;
37  content: "🪐";
38  width: 200%;
39  height: 200%;
40  top: 0;
41  left: 0;
42  transform: translate(-25%, -75%);
43}
44
45button .liquid::after {
46  border-radius: 45%;
47  background: rgba(20, 20, 20, 1);
48  box-shadow: 0 0 10px 5px #33053C, inset 0 0 5px #33053C;
49  animation: animate 5s linear infinite;
50  opacity: 0.8;
51}
52
53button .liquid::before {
54  content: "🚀";
55  border-radius: 40%;
56  box-shadow: 0 0 10px rgba(26, 26, 26, 0.5),
57        inset 0 0 5px rgba(26, 26, 26, 0.5);
58  background: rgba(26, 26, 26, 0.5);
59  animation: animate_3881 7s linear infinite;
60}
61
62@keyframes animate_3881 {
63  0% {
64    transform: translate(-25%, -75%) rotate(0);
65  }
66
67  100% {
68    transform: translate(-25%, -75%) rotate(360deg);
69  }
70}
71
72button:hover .liquid {
73  top: -120px;
74}
75
76button:hover {
77  box-shadow: 0 0 5px #33053C, inset 0 0 5px #33053C;
78  transition-delay: 0.2s;
79}
80