Как сделать такой эффект кнопки?

Question

[Sergey750il]

Доброго времени суток. Есть кнопка https://jsfiddle.net/vpLugfne/1/
как сделать, что бы при ховер она плавно расширялась, а при актив наоборот немного сужалась? Главная проблема, что текст должен быть всегда одинакового размера и нет возможности использовать псевдоклассы и вложенные блоки.

Answer 1

[frammmm]

.btn:hover {
  padding-left: 3em;
  padding-right: 3em;
}

.btn:active {
  padding-left: 2em;
  padding-right: 2em;
}

Comments

[Sergey750il]

Пробовал, но есть еще небольшой padding вниз и кнопка в итоге скачет(

Answer 2

[Ankhena]

https://jsfiddle.net/os5eg4ya/

Answer 3

[auddit]

Используйте свойство transform, для того, чтобы текст кнопки всегда оставался на месте.
Например, если padding у кнопки слева и справа по 25px, а при ховере вы хотите получить padding 30px, то добавляете transform: translateX(-5px). То есть, мы компенсируем разницу в отступе 30-25=5px. Тоже самое, если вы хотите при active получить сужение на 5px – transform: translateX(5px) здесь уже без отрицательного значения.
Пример: https://jsfiddle.net/sopjb7rn/