Play/pauze die morpht New

A play button whose triangle morphs smoothly into two pause bars and back: two halves with a four point clip-path polygon that CSS interpolates between both states. The accessible name follows along (Play/Pause) and the time really runs. For podcasts, audio tours, explainer videos and read-aloud buttons; with reduced motion the icon swaps instantly.

Zonnepanelen op een rijtjeshuis

De Bouwpodcast Utrecht, aflevering 14

12:4031:05

How to use it

Paste the HTML where the buttons should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Play/pauze die morpht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kpp">
<div class="kpp__card">
<div class="kpp__row">
<button class="kpp__btn" type="button" aria-label="Afspelen: Zonnepanelen op een rijtjeshuis"><span class="kpp__ic" aria-hidden="true"><span class="kpp__h kpp__h--l"></span><span class="kpp__h kpp__h--r"></span></span></button>
<div class="kpp__info">
<p class="kpp__title">Zonnepanelen op een rijtjeshuis</p>
<p class="kpp__sub">De Bouwpodcast Utrecht, aflevering 14</p>
</div>
</div>
<div class="kpp__track" aria-hidden="true"><span class="kpp__fill"></span></div>
<div class="kpp__time"><span class="kpp__now">12:40</span><span>31:05</span></div>
</div>
</div>
</div>

/* Play/pauze die morpht · NedDev · eigen werk. */
.kpp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.kpp *,.kpp *::before,.kpp *::after{box-sizing:border-box}
.kpp__card{width:min(340px,100%);padding:16px;background:#fff;border:1px solid #e2dfda;border-radius:8px}
.kpp__row{display:flex;align-items:center;gap:14px}
.kpp__btn{appearance:none;flex:none;width:52px;height:52px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:#0a0a0a;color:#fff;cursor:pointer;transition:background-color .16s ease,transform .12s ease}
.kpp__btn:hover{background:#F5480F;color:#0a0a0a}
.kpp__btn:active{transform:scale(.95)}
.kpp__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.kpp__ic{position:relative;display:block;width:18px;height:20px;transform:translateX(2px);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.kpp__h{position:absolute;inset:0;background:currentColor;transition:clip-path .3s cubic-bezier(.4,0,.2,1)}
.kpp__h--l{clip-path:polygon(0 0,50% 25%,50% 75%,0 100%)}
.kpp__h--r{clip-path:polygon(50% 25%,100% 50%,100% 50%,50% 75%)}
.kpp.is-playing .kpp__ic{transform:none}
.kpp.is-playing .kpp__h--l{clip-path:polygon(0 0,36% 0,36% 100%,0 100%)}
.kpp.is-playing .kpp__h--r{clip-path:polygon(64% 0,100% 0,100% 100%,64% 100%)}
.kpp__info{min-width:0}
.kpp__title{margin:0;font:600 15px/1.25 'Switzer',sans-serif}
.kpp__sub{margin:3px 0 0;font:400 13px/1.3 'Switzer',sans-serif;color:#5d5953}
.kpp__track{margin-top:16px;height:4px;background:#e8e5e0;border-radius:4px;overflow:hidden}
.kpp__fill{display:block;height:100%;width:40.8%;background:#F5480F;transition:width .9s linear}
.kpp__time{display:flex;justify-content:space-between;margin-top:7px;font:500 12px/1 'Switzer',sans-serif;color:#5d5953;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.kpp__ic,.kpp__h,.kpp__fill,.kpp__btn{transition:none}}

// Play/pauze die morpht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kpp');if(!w)return;
var b=w.querySelector('.kpp__btn'),fill=w.querySelector('.kpp__fill'),now=w.querySelector('.kpp__now');
var pos=760,len=1865,timer=null,name='Zonnepanelen op een rijtjeshuis';
function fmt(s){var m=Math.floor(s/60),r=s%60;return m+':'+(r<10?'0':'')+r;}
function draw(){now.textContent=fmt(pos);fill.style.width=(pos/len*100).toFixed(2)+'%';}
function set(p){w.classList.toggle('is-playing',p);b.setAttribute('aria-label',(p?'Pauzeren: ':'Afspelen: ')+name);clearInterval(timer);timer=null;
  if(p)timer=setInterval(function(){pos=Math.min(len,pos+1);draw();if(pos>=len)set(false);},1000);}
b.addEventListener('click',function(){set(!w.classList.contains('is-playing'));});
document.addEventListener('visibilitychange',function(){if(document.hidden&&timer)set(false);});
draw();
}
init(document.querySelector('.jouw-container'));

More buttons

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →