Button by barisdogansutcu

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  cursor: pointer;
11  border: solid 2px black;
12  letter-spacing: 1px;
13  font-weight: 600;
14  font-size: 17px;
15  background-color: hsl(49deg 98% 60%);
16  border-radius: 50px;
17  position: relative;
18  overflow: hidden;
19  transition: all 0.5s ease;
20}
21
22button:active {
23  transform: scale(0.9);
24  transition: all 100ms ease;
25}
26
27button svg {
28  transition: all 0.5s ease;
29  z-index: 2;
30}
31
32.play {
33  transition: all 0.5s ease;
34  transition-delay: 300ms;
35}
36
37button:hover svg {
38  transform: scale(3) translate(50%);
39}
40
41.now {
42  position: absolute;
43  left: 0;
44  transform: translateX(-100%);
45  transition: all 0.5s ease;
46  z-index: 2;
47}
48
49button:hover .now {
50  transform: translateX(10px);
51  transition-delay: 300ms;
52}
53
54button:hover .play {
55  transform: translateX(200%);
56  transition-delay: 300ms;
57}
58