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

Чтобы сделать кнопку увеличивающуюся по ширине при наведении на неё мы можем использовать CSS и псевдокласс :hover. Вот как это можно сделать:

1. HTML:

<button class="expanding-button">Наведи на меня</button>

2. CSS:

.expanding-button {
    padding: 10px 20px; /* Устанавливаем отступы вокруг текста кнопки */
    transition: width 0.3s; /* Добавляем плавный переход при изменении ширины */
}

.expanding-button:hover {
    width: 150px; /* Увеличиваем ширину кнопки при наведении */
}

В данном примере, при наведении на кнопку класса expanding-button, её ширина будет увеличиваться до 150px с плавным переходом за 0.3 секунды благодаря свойству transition. Вы можете изменять значения ширины и других свойств, чтобы добиться нужного вам эффекта.

Таким образом, при наведении курсора на кнопку она будет увеличиваться по ширине, создавая интересный визуальный эффект для пользователей вашего веб-сайта.