Как сделать hover у вертикального градиента?

Question

[Genri_Rus]

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

Comments

[Ankhena]

Если горизонтальный градиент анимируется сдвигом по горизонтали, то ваш, очевидно сдвигом по вертикали. И двойной размер, соответственно должен быть вертикальный, а не горизонтальный.

Ну и до кучи
https://jsfiddle.net/Ankhena/jpxa6Lh2/

[Genri_Rus]

Ankhena, спасибо за пример.
А если не использовать переменные, то добавлять background-size?

[Ankhena]

Genri_Rus, тогда по-старинке

[Genri_Rus]

Ankhena, понял, а вот так нормально будет: ссылка?
Единственное не совсем понятно, как рассчитывать background-size?

[Ankhena]

Genri_Rus,

а вот так нормально будет: ссылка?

Почему вы у меня об этом спрашиваете? Если вам красиво, то нормально.

[Genri_Rus]

Ankhena, дело в том, что мне не совсем понятно как background-size рассчитывать)
У меня там указан background-size: 100% 300%, в других примерах процент отличается.

[Ankhena]

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

Самый простой вариант: цвет 1, цвет 2, цвет 1 и 200%. Дальше развлекайтесь для достижения более интересных переходов.

Answer 1

[Саргис Алексанян]

Не совсем понятный вопрос, но можно поменять направление градиентама в любую сторону
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%);
}

Comments

[Genri_Rus]

А как сделать, чтобы градиент был плавным?

[Саргис Алексанян]

Через before и after, много примеров есть в интернете)
https://codepen.io/fabswt/pen/dEYXrK

[Genri_Rus]

SargisAleksanyan2003, понял, спасибо большое.