Как сделать так, чтобы кнопка не двигалась/растягивалась при нажатии?

Question

Есть кнопка:

<button id="random_test">
  <p id="text_random_button">Случайный тест</p>
</button>

Как в css заставить её не двигаться/растягиваться по нажатии на кнопку?

Answer 1

Кнопка может "двигаться" и/или "растягиваться" если что то меняется в layout'e (при ее нажатии) или изменяется ее собственный размер.

На примере ниже видно что сейчас она всегда на одном месте и одного и того же размера:

const handleClick = () => {
  document.querySelector("p").classList.toggle("color")
}

document.querySelector("button").addEventListener("click", handleClick)

.color {
  background-color: red;
}

<p>текст текст текст</p>
<button>Сменить фон текста</button>

БЛОГ НА HUSL

Как сделать так, чтобы кнопка не двигалась/растягивалась при нажатии?

Ответы (1 шт):