Как сделать плавную смену фона при наведении на кнопку?

Question

У меня есть кнопка. При наведении она меняет цвет. Как мне сделать так, чтобы это было плавно? Спасибо.

button {
  position: relative;
  overflow: hidden;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid green;
  background: none;
  font-size: 20px;
  color: green;
  cursor: pointer;
}

button:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: green;
  z-index: -1;
}

button:hover {
  color: white;
}

button:hover:before {
  top: 0;
  height: 100%;
}

<button>Отправить</button>

Answer 1

Вам необходимо перенести background в hover и поставить transition
Чтобы так же медленно убирался фон, когда кнопка не наведена, так же можно добавить в основной класс button transition

    button {
        position: relative;
        overflow: hidden;
        margin: 10px;
        padding: 10px 20px;
        border: 1px solid green;
        background: none;
        font-size: 20px;
        color: green;
        cursor: pointer;
        transition: 3s;
    }

    button:before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 0%;
        z-index: -1;
    }

    button:hover {
        color: white;
        background: green;
        transition: 3s;
    }

    button:hover:before {
        top: 0;
        height: 100%;
    }

<button>Отправить</button>

Answer 2

Немного импровизации, чтобы не повторяться. Может кому пригодится.

button {outline: none;position: relative;overflow: hidden;margin: 10px;padding: 10px 20px;border: 1px solid green;background: none;font-size: 20px;cursor: pointer;transition: 1s;}
button:before {content: "";position: absolute;left: 0;width: 100%;height: 0%;background: green;z-index: -1;transition: 1s;}
.button1,.button2 {color: green;}
.button3 {color: white;}
.button1:hover,.button2:hover {color: white;}
.button3:hover {color: green;}
.button1:before {top: 0;border-radius: 0 0 50% 50%;}
.button2:before,.button3:before {bottom: 0;border-radius: 50% 50% 0 0;}
.button3:before {height: 200%;}
.button1:hover:before,.button2:hover:before {height: 200%;}
.button3:hover:before {height: 0%}

<button class="button1">Отправить</button><button class="button2">Отправить</button><button class="button3">Отправить</button>

БЛОГ НА HUSL

Как сделать плавную смену фона при наведении на кнопку?

Ответы (2 шт):