1.btn {
2  padding: 10px;
3  border-radius: 5px;
4  font-size: 15px;
5  background-color: black;
6  color: rgb(238, 255, 0);
7  position: relative;
8  overflow: hidden;
9}
10
11.default-text {
12  z-index: 1;
13}
14
15.hover-text {
16  position: absolute;
17  top: 50%;
18  left: 50%;
19  transform: translate(-50%, -50%);
20  opacity: 0;
21  transition: opacity 0.5s ease-in-out;
22}
23
24.btn:hover .default-text {
25  opacity: 0;
26}
27
28.btn:hover .hover-text {
29  opacity: 1;
30  animation: bounce 0.5s ease-in-out;
31}
32
33@keyframes bounce {
34  0% {
35    transform: scale(1);
36  }
37
38  25% {
39    transform: scale(1.2);
40  }
41
42  75% {
43    transform: scale(1.1);
44  }
45
46  100% {
47    transform: scale(1);
48  }
49}
50
51.btn:hover::after {
52  content: '';
53  position: absolute;
54  top: -10px;
55  left: -10px;
56  width: calc(100% + 20px);
57  height: calc(100% + 20px);
58  border-radius: 50%;
59  background-color: rgba(255, 255, 255, 0.5);
60  opacity: 0;
61  animation: fireworks 1s linear forwards;
62}
63
64@keyframes fireworks {
65  0% {
66    transform: scale(1);
67    opacity: 1;
68  }
69
70  100% {
71    transform: scale(4);
72    opacity: 0;
73  }
74}
75