@ponomarevagalina

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

Доброго времени суток. Есть кнопка, как реализовать правильно, чтобы при ховере кнопка становилась шире, но при этом не отодвигала другие элементы (li) 662524ea0c6d3288132494.png
<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>
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы