Snippet of the Day: Pure CSS Animated Play, Pause, and Buffer Button

The title says it all: A pure CSS animated play, pause, and buffer button. The way I have it implemented, it uses JS to switch between play, pause, and buffer states, but it’s the CSS dataset/class selectors that actually control the appearance/animations. If you really wanted to do this in pure CSS, you could make the button a label for a checkbox and control the states that way. I’m not sure why you’d want to do it that way, but if you did, that’s a way you could do it. Anyway…

This uses the magic of CSS clip paths. The secret to animated clip paths is that they just have to have the same number of points to transition into each other. The tricky part is creating polygons with hidden lines that use just the right amount of points. This was especially tricky for the buffering button, but for you guys I’d make any clip path.

Demo:

 

Gist