Ховер кнопки градиентным текстом с trasition?

Для создания эффекта "ховер" кнопки с градиентным текстом и анимацией перехода (transition), нам понадобятся стили CSS.

Прежде всего, мы должны создать стили для кнопки. Можно использовать класс или идентификатор, так что давайте назовем его "button".

.button {
   background: linear-gradient(to right, #ff00cc, #333399); /* задний фон с градиентом */
   padding: 10px 20px; /* отступы кнопки */
   color: transparent; /* делаем цвет текста прозрачным */
   background-clip: text; /* задаем фону такой же контур, что и тексту */
   -webkit-background-clip: text; /* для поддержки веб-кит браузеров */
   transition: color 0.5s ease; /* анимация перехода цвета */
   cursor: pointer; /* указатель при наведении на кнопку */
}

Эти стили задают кнопке задний фон с градиентом, определенные отступы, делают цвет текста прозрачным и устанавливают анимацию перехода для эффекта ховера.

Теперь нам нужно создать стили для эффекта "ховер":

.button:hover {
   color: white; /* изменяем цвет текста при ховере на белый */
}

При наведении курсора на кнопку, изменяется цвет текста на белый. Это происходит благодаря анимации перехода, которая была определена в основных стилях кнопки.

Вот и все! Теперь, когда вы примените эти стили к вашей кнопке, вы получите эффект ховера кнопки с градиентным текстом и анимацией перехода.