Skip to main content

Posts

Showing posts with the label Making a Pure CSS Play/Pause Button

Making a Pure CSS Play/Pause Button

Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows  ▶️  = play, but that users will seek out the icon in order to watch any video or animation. Reportedly introduced in the 1960s by Swedish engineer Philip Olsson  the play arrow was first designed to indicate the direction where the tape would go when reading on reel-to-reel tape players. Since then, we switched from cassettes to CDs, from the iPod to Spotify, but the media controls icons remain the same. The play  ▶️  icon is standard symbol (with its own  unicode ) of starting an audio/video media along with the rest of the symbols like stop, pause, fast-forward, rewind, and others. There are unicode and emoji options for play button icons, but if you wanted something custom, you might reach for an icon font or custom asset. But what if you want to s...