I was thinking about something that I could that would be pure css and also practical. The idea came to me to do Media Buttons with CSS. Using the :before and :after psuedo selectors the Play, Pause, Stop, Fast Forward and Rewind shapes were doable in CSS and not too over the top.

I was having trouble having the buttons be Resized easily, because the psuedo elements are before and after the content, and not inside when I gave them the relative em values, they weren’t being resized when the base button style was resized, so I used the math operations in less, based on a default size value to resize the elements properly. So, you can essentially pass a different size variable to the buttons mixin and you can get a custom sized button very easily.

Also, the arrows can look jagged on certain browsers because of non-antialiasing when creating the arrows on certain browsers (Chrome 19 and below, and Firefox). They look pretty good in IE 9, but no gradient.

Below is the finished result. Take a look at it on CodePen.io and feel free to improve upon it.

View and Edit this on CodePen.io