Как убрать скачки текста при использовании hover?

Question

[webrapist]

Привет.

Есть у меня кнопка. В ней текст. При наведении на кнопку появляется бордер и текст внутри скачет. Если убрать границы при наведении - то всё окей. Как поправить?

Наглядный пример.

Answer 1

[Николай Шабалин]

Один из выходов это сделать, изначально, бордеры прозрачного цвета.

.download-buttom {
  border: 1px solid transparent;
}

Answer 2

[mmjurov]

Используйте box-sizing при hover
box-sizing:border-box;

Comments

[webrapist]

Всё равно скачет.

Answer 3

[olegshilov]

Используйте box-shadow, и будет вам счастье

Answer 4

[smoklew]

https://codepen.io/webrapist/pen/JXvvGQ

Comments

[webrapist]

Извините, что?

[smoklew]

swibong: не поменялось, но следующий уже ответил...