Toggle Morph (Play/Pause)
An icon that smoothly morphs between play and pause states with a gentle scale transition. Ideal for media player controls, audio widgets, or any toggle that benefits from visual state feedback.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
togglemorphplaypauseicon
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An icon that smoothly morphs between play and pause states for media controls.
CSS
css
.toggle { width: 56px; height: 56px; border: none; background: #22c55e; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.toggle:hover { transform: scale(1.05); }
.toggle .play { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.toggle .pause { display: none; width: 14px; height: 16px; gap: 4px; justify-content: center; }
.toggle .pause span { display: block; width: 4px; height: 16px; background: #fff; border-radius: 2px; }
.toggle.playing .play { display: none; }
.toggle.playing .pause { display: flex; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<button class="toggle" onclick="this.classList.toggle('playing')"><span class="play"></span><div class="pause"><span></span><span></span></div></button>Full Source
html
<!DOCTYPE html>
<html><head><style>
.toggle { width: 56px; height: 56px; border: none; background: #22c55e; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.toggle:hover { transform: scale(1.05); }
.toggle .play { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.toggle .pause { display: none; width: 14px; height: 16px; gap: 4px; justify-content: center; }
.toggle .pause span { display: block; width: 4px; height: 16px; background: #fff; border-radius: 2px; }
.toggle.playing .play { display: none; }
.toggle.playing .pause { display: flex; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<button class="toggle" onclick="this.classList.toggle('playing')"><span class="play"></span><div class="pause"><span></span><span></span></div></button>
</body></html>