1button {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  gap: 10px;
6  padding: 0 10px;
7  color: white;
8  text-shadow: 2px 2px rgb(116, 116, 116);
9  text-transform: uppercase;
10  border: solid 2px black;
11  letter-spacing: 1px;
12  font-weight: 600;
13  font-size: 17px;
14  background-color: hsl(49deg 98% 60%);
15  border-radius: 50px;
16  position: relative;
17  overflow: hidden;
18  transition: all .5s ease;
19}
20
21button:active {
22  transform: scale(.9);
23  transition: all 100ms ease;
24}
25
26button svg {
27  transition: all .5s ease;
28  z-index: 2;
29}
30
31.play {
32  transition: all .5s ease;
33  transition-delay: 300ms;
34}
35
36button:hover svg {
37  transform: scale(3) translate(50%);
38}
39
40.now {
41  position: absolute;
42  left: 0;
43  transform: translateX(-100%);
44  transition: all .5s ease;
45  z-index: 2;
46}
47
48button:hover .now {
49  transform: translateX(10px);
50  transition-delay: 300ms;
51}
52
53button:hover .play {
54  transform: translateX(200%);
55  transition-delay: 300ms;
56}