Animated Toggle Group

<div class="tgg" id="tgg"><button class="on">List</button><button>Grid</button><button>Board</button><span class="tgg-ind" id="ind"></span></div>

body{background:#f6f7fa}
.tgg{position:relative;display:inline-flex;background:#1a1f36;border-radius:14px;padding:5px}
.tgg button{position:relative;z-index:1;border:0;background:0;color:#8a93ad;font:600 14px/1 system-ui,sans-serif;padding:11px 22px;cursor:pointer;border-radius:10px;transition:color .25s}
.tgg button.on{color:#fff}
.tgg-ind{position:absolute;top:5px;bottom:5px;border-radius:10px;background:linear-gradient(135deg,#ff7a18,#ff477e);transition:.35s cubic-bezier(.5,0,.2,1);z-index:0}

var g=document.getElementById('tgg'),ind=document.getElementById('ind'),btns=g.querySelectorAll('button');
function mv(b){ind.style.left=b.offsetLeft+'px';ind.style.width=b.offsetWidth+'px'}
btns.forEach(function(b){b.onclick=function(){btns.forEach(function(x){x.classList.remove('on')});b.classList.add('on');mv(b)}});
setTimeout(function(){mv(btns[0])},50);