I have a problem with the pause/play button moving when clicked. How can I fix this?
const btn = document.querySelector(".button");
if (btn === null) {
throw new Error('could not find button');
}
btn.addEventListener("click", function() {
btn.classList.toggle("paused");
return false;
});:root {
--pauseButtonhight: 16px;
--pauseButtonwidth: 13px;
--pauseButtonborder: 8px;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
padding: 0;
height: var(--pauseButtonhight);
border-color: transparent transparent transparent #7083d8;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: var(--pauseButtonborder) 0 var(--pauseButtonborder) var(--pauseButtonwidth);
}
.button.paused {
padding-top: 8px;
border-style: double;
border-width: 0px 0 0px var(--pauseButtonwidth);
}
.button:hover {
border-color: transparent transparent transparent #404040;
}<div>
<label for="playspersecond">Updates per second: </label>
<input type="number" id="playspersecond" value="5" min="0" max="10" />
<button class="button" id="play"></button>
</div>The issue is that the button moves up and down when pressed, affecting the surrounding text as well. I suspect there's an error in how I'm styling the button in different states, but being new to CSS/HTML, I'm unsure of what to do next. This design is based on this pause button
If you know of a more efficient way to create a pause/play button, please let me know.