Как реализовать эффект hover для вертикального градиента?

Question

Ермолай

css

Как реализовать эффект hover для вертикального градиента?

Как изменить цвета вертикального градиента при наведении вместо горизонтального градиента? В основном примеры демонстрируют использование горизонтальных градиентов (left, right), но как этот подход можно применить к вертикальным градиентам (top/bottom), особенно при наведении курсора?

20 мая 2024 г. 20:40

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации эффекта hover для вертикального градиента можно использовать следующий CSS код:

```css
.gradient {
    background: linear-gradient(to bottom, #ffcc00, #ff6600); /* начальные цвета градиента */
    transition: background 0.5s; /* добавляем анимацию при смене цвета */
}

.gradient:hover {
    background: linear-gradient(to bottom, #ff9900, #ff3300); /* цвета градиента при наведении */
}
```

В данном примере, блок с классом `.gradient` будет иметь вертикальный градиент с начальными цветами `#ffcc00` и `#ff6600`. При наведении курсора на этот блок, цвета градиента изменятся на `#ff9900` и `#ff3300` с помощью псевдокласса `:hover`.

Таким образом, изменение цветов вертикального градиента при наведении курсора можно легко реализовать с помощью CSS и псевдокласса `:hover`.

Answer 2

Не совсем понятный вопрос, но можно поменять направление градиентама  в любую сторону 
 https://developer.mozilla.org/en-US/docs/Web/CSS/g... 
 .btn {
  background: linear-gradient(to bottom, #ff5722 0%, #f6d365 100%);
}

.btn:hover {
   background: linear-gradient(to top, #ff5722 0%, #f6d365 100%);
}