Как сделать, что бы кнопка при ховере увеличивала ширину?

Question

[ponomarevagalina]

Доброго времени суток. Есть кнопка, как реализовать правильно, чтобы при ховере кнопка становилась шире, но при этом не отодвигала другие элементы (li)

<menu class="menu">
            <ul class="menu__list">
              <li class="menu__item">
                <a href="#" class="menu__link">Info</a>
              </li>
              <li class="menu__item">
                <a href="#" class="menu__link">Product</a>
              </li>
              <li class="menu__item">
                <a href="#" class="menu__link">Contacts</a>
              </li>
              <li class="menu__item menu__item-btn">
                <button type="button" class="menu__btn">buy</button>
              </li>
            </ul>
          </menu>
<code lang="css">
.menu__list {
  display: flex;
  align-items: center;
  gap: 0 40px;
  font-weight: 700;
}
.menu__btn {
  padding: 15px 58px;
  border-radius: 30px;
  font-weight: 700;
  color: var(--white);
  background-color: var(--black);
  text-transform: uppercase;
  transition: all 0.3s;
}
.menu__btn:hover {
  padding: 15px 65px;
  transform: translateX(-7px);
}
.menu__btn:active {
  padding: 15px 51px;
  transform: translateX(7px);
}
</code>

Comments

[Ankhena]

1. Тени
2. Псевдоэлементы
3. Сразу большая кнопка, меняется размер фона градиентом

Ещё что-нибудь

Answer 1

[Виталий Першин]