The Ultimate Guide to Button Design in Web Projects

6. Media Control Buttons

Media control buttons are essential for providing an intuitive interface for users to interact with audio and video content. This chapter covers the main types of media control buttons and best practices for their implementation.

Play, Pause, and Stop Buttons

These buttons control the playback of media content.

Best practices:

• Use universally recognized icons for play (▶), pause (⏸), and stop (⏹)
• Toggle between play and pause icons based on the media state
• Provide keyboard shortcuts for accessibility (e.g., spacebar for play/pause)

Example SVG icons and CSS for play/pause toggle:

<!-- HTML -->
<button class="btn btn-media" id="playPauseBtn">
  <svg class="play-icon" width="24" height="24" viewBox="0 0 24 24">
    <path d="M8 5v14l11-7z"/>
  </svg>
  <svg class="pause-icon" width="24" height="24" viewBox="0 0 24 24">
    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
  </svg>
</button>

/* CSS */
.btn-media {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.btn-media svg {
    fill: #333;
    transition: fill 0.3s ease;
}

.btn-media:hover svg {
    fill: #3498db;
}

.pause-icon {
    display: none;
}

.btn-media.playing .play-icon {
    display: none;
}

.btn-media.playing .pause-icon {
    display: inline-block;
}