1.container {
2  width: 120px;
3  height: 120px;
4  position: relative;
5  border-radius: 50%;
6}
7
8.play-btn {
9  position: absolute;
10  appearance: none;
11  width: 100%;
12  height: 100%;
13  border-radius: 50%;
14  background: conic-gradient(#ff6347, #ff6347);
15  cursor: pointer;
16  outline: none;
17}
18
19.play-btn::before {
20  content: "";
21  position: absolute;
22  width: 93%;
23  height: 93%;
24  background-color: #000;
25  border-radius: 50%;
26  left: 50%;
27  top: 50%;
28  transform: translate(-50%, -50%);
29}
30
31.play-btn:checked {
32  animation: borderAnimate 700ms ease-in-out 1;
33  animation-fill-mode: forwards;
34}
35
36@keyframes borderAnimate {
37  0% {
38    transform: rotate(0);
39    background: conic-gradient(#ff6347, transparent 20%);
40  }
41
42  80% {
43    background: conic-gradient(#ff6347, transparent 90%);
44  }
45
46  100% {
47    transform: rotate(360deg);
48    background: conic-gradient(#ff6347, #ff6347);
49  }
50}
51
52.play-icon {
53  position: absolute;
54  width: 40px;
55  height: 40px;
56  left: 60%;
57  top: 50%;
58  background-color: #ff6347;
59  transform: translate(-60%, -50%) rotate(90deg);
60  clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
61  transition: all 400ms ease-in-out;
62  cursor: pointer;
63}
64
65.play-btn:checked + .play-icon {
66  clip-path: polygon(0 100%, 0% 100%, 100% 100%);
67}
68
69.pause-icon {
70  position: absolute;
71  width: 40px;
72  height: 40px;
73  left: 50%;
74  top: 50%;
75  transform: translate(-50%, -50%);
76  cursor: pointer;
77}
78
79.pause-icon::before {
80  content: "";
81  position: absolute;
82  width: 0%;
83  height: 100%;
84  background-color: #ff6347;
85  left: 0;
86}
87
88.pause-icon::after {
89  content: "";
90  position: absolute;
91  width: 0;
92  height: 100%;
93  background-color: #ff6347;
94  right: 0;
95}
96
97.play-btn:checked ~ .pause-icon::before {
98  animation: reveal 300ms ease-in-out 350ms 1;
99  animation-fill-mode: forwards;
100}
101
102.play-btn:checked ~ .pause-icon::after {
103  animation: reveal 300ms ease-in-out 600ms 1;
104  animation-fill-mode: forwards;
105}
106
107@keyframes reveal {
108  0% {
109    width: 0;
110  }
111
112  100% {
113    width: 35%;
114  }
115}