.nav{position:relative;width:580px;height:55px}.container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:.5em}.outline{position:absolute;outline:transparent;top:0;right:0;bottom:0;left:0;pointer-events:none}.rect{position:center;x:0px;y:0px;width:580px;height:55px}.rect{stroke:#007bff;stroke-dashoffset:11;stroke-linejoin:round;stroke-linecap:butt;stroke-width:3px;stroke-dasharray:0 0 10 40 10 40;stroke-opacity:.7;transition:.5s}.btn{padding:8px 24px;color:#f8fafc;cursor:pointer;transition:.2s}.btn:hover{background:#007bff26;color:#fff;text-shadow:0 0 15px rgba(255,255,255,.9)}html.light .btn{color:#0a0a0a}html.light .btn:hover{background:#0000000d;color:#007bff;text-shadow:0 0 10px rgba(0,123,255,.4)}.btn:nth-child(1):hover~svg .rect{stroke-dashoffset:0;stroke-dasharray:0 .5 9 75 9 8}.btn:nth-child(2):hover~svg .rect{stroke-dashoffset:0;stroke-dasharray:0 10 9.5 55.5 9.5 31.6}.btn:nth-child(3):hover~svg .rect{stroke-dashoffset:0;stroke-dasharray:0 19.7 9 36.8 9 55.5}.btn:nth-child(4):hover~svg .rect{stroke-dashoffset:0;stroke-dasharray:0 29 8 20.5 8 76}.btn:nth-child(5):hover~svg .rect{stroke-dashoffset:0;stroke-dasharray:0 36.5 8 5.5 8 76}.btn:hover~.outline .rect{stroke-dashoffset:0;stroke-dasharray:0 0 10 40 10 40;transition:.5s!important}