1.level-up {
2  font-family: 'Montserrat', sans-serif;
3  font-size: 25px;
4  font-weight: bold;
5  color: #ffffff;
6  background-color: #ff5733;
7  padding: 20px;
8  border-radius: 10px;
9  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
10  text-align: center;
11  transition: all 0.3s ease;
12}
13
14.text {
15  position: relative;
16  display: inline-block;
17  animation: bounce 1s infinite;
18}
19
20.level-up:hover {
21  background-color: #ffffff;
22  color: #ff5733;
23  transform: scale(1.1);
24}
25
26.level-up:hover .text {
27  animation: none;
28}
29
30@keyframes bounce {
31  0% {
32    transform: translateY(0);
33  }
34
35  50% {
36    transform: translateY(-10px);
37  }
38
39  100% {
40    transform: translateY(0);
41  }
42}
43
44.level-up:hover::before {
45  content: "";
46  display: block;
47  width: 10px;
48  height: 10px;
49  background-color: #ff5733;
50  border-radius: 50%;
51  position: absolute;
52  top: -20px;
53  left: calc(50% - 5px);
54  animation: bounce 0.5s infinite;
55}
56