Кнопка ввода - изменить размер текста, но сохранить размер кнопки

Question

Я хочу сделать пользовательскую кнопку CSS и попробовать сделать так, чтобы «нажатая» кнопка выглядела как нажатая:

input[type="button"]
{
  border: 1px solid #777;
  border-radius: .2em;
  box-shadow: 0 0 .3em #777;
  background: #fff;
  color: #555;
  font-size: 1rem;
  height: 2rem;
  margin: .5rem;
  -webkit-appearance: none;
}


input[type="button"]:active
{
  box-shadow: inset 0 0 .1em #777;
  font-size: .9em;
  height: 2rem;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ligula vitae eros ultrices luctus. 
<input type="button" value="Button one"> Vivamus ut felis massa. Cras a urna egestas, vehicula diam eu, accumsan lectus. Sed feugiat, odio quis cursus venenatis, felis dolor ultricies arcu, sit amet convallis eros nisi vel neque. <input type="button" value="Second button"> Cras facilisis in diam vel eleifend. Duis at tincidunt dui. Aliquam egestas at metus in malesuada. Nulla tincidunt lorem vel cursus porttitor. Phasellus gravida eleifend nulla.

Выглядит нормально для меня, но изменение размера шрифта предполагает изменение размера самой кнопки, что приводит к изменению всего макета. С другой стороны, я не могу установить ширину кнопки, потому что я хочу сделать «универсальный» CSS для всех моих страниц и всех кнопок там, и я не знаю, какой текст будет внутри. Вопрос: есть ли способ сохранить ширину кнопки при изменении размера шрифта? Или единственный способ - использовать div в div вместо кнопок?

Answer 1

Вместо изменения размера шрифта на активном вы можете уменьшить масштаб кнопки, чтобы она по-прежнему сохраняла свою первоначальную ширину, а также уменьшала размер визуально.

transform: scale(0.95);

Answer 2

Вы можете поэкспериментировать с настройкой относительных 'padding-left' и 'padding-right' на кнопке, когда 'active'.

Здесь я установил его на 10% (что, очевидно, слишком велико):

input[type="button"]
{
  border: 1px solid #777;
  border-radius: .2em;
  box-shadow: 0 0 .3em #777;
  background: #fff;
  color: #555;
  font-size: 1rem;
  height: 2rem;
  margin: .5rem;
  -webkit-appearance: none;
}


input[type="button"]:active
{
  box-shadow: inset 0 0 .1em #777;
  font-size: .9em;
  height: 2rem;
  padding-left: 10%;
  padding-right: 10%;
 }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ligula vitae eros ultrices luctus. 
<input type="button" value="Button one"> Vivamus ut felis massa. Cras a urna egestas, vehicula diam eu, accumsan lectus. Sed feugiat, odio quis cursus venenatis, felis dolor ultricies arcu, sit amet convallis eros nisi vel neque. <input type="button" value="Second button"> Cras facilisis in diam vel eleifend. Duis at tincidunt dui. Aliquam egestas at metus in malesuada. Nulla tincidunt lorem vel cursus porttitor. Phasellus gravida eleifend nulla.