|
<style> |
|
#playpause-button { |
|
border: 0px; |
|
box-sizing: border-box; |
|
transition: .5s all ease; |
|
cursor: pointer; |
|
background: #E46018; |
|
width: 56px; |
|
height: 56px; |
|
margin-right:1rem; |
|
} |
|
#playpause-button:after { |
|
background: #fefefe !important; |
|
display: block; |
|
width: 45%; |
|
height: 45%; |
|
transition: clip-path 0.25s, transform 0s; |
|
clip-path: polygon(15% 15%, 15% 85%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%); |
|
margin: 0px auto; |
|
content: ""; |
|
} |
|
#playpause-button[data-state="play"]:after { |
|
clip-path: polygon(15% 15%, 15% 85%, 30% 85%, 30% 15%, 70% 15%, 85% 15%, 85% 85%, 70% 85%, 70% 15%); |
|
} |
|
#playpause-button:hover { |
|
background:#db5b15; |
|
} |
|
#playpause-button.buffer { |
|
background:silver; |
|
} |
|
#playpause-button.buffer:after { |
|
transition: clip-path 0.25s, background 0.5s, transform 20s; |
|
clip-path: polygon(74% 0, 100% 0, 100% 100%, 74% 100%, 74% 0, 65% 49%, 0 100%, 0 0, 65% 49%); |
|
transform: rotate(3600deg); |
|
} |
|
</style> |
|
|
|
<button id="playpause-button"></button> |
|
|
|
<hr/> |
|
<button id = 'buffer'>Toggle Buffering</button> |
|
|
|
<script> |
|
//THIS CODE IS JUST TO TOGGLE THE CSS CLASSES/DATASETS! THIS DOES NOT CONTROL THE ANIMATIONS! |
|
document.querySelector("#playpause-button").onclick = ev=>{ ev.target.dataset.state = ev.target.dataset.state=="play"?"pause":"play"; } |
|
document.querySelector("#buffer").onclick = ev=>{ document.querySelector("#playpause-button").classList.toggle("buffer"); } |
|
</script> |
