Поверните вправо переход CSS

Question

У меня есть кнопка отправки, мне нужно развернуть фон слева направо:

<input type="submit" value="Send Request" class="sweep">

Мне нужно что-то вроде развертка вправо .Все образцы приведены для кнопок , тегов a, li и Div .

Answer 1

Вы можете попытаться анимировать свойство background-size для имитации этого эффекта

input {
  padding: .75em;
  border: 1px #ddd solid;
  background: linear-gradient(to right, #eee, #eee);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 1s 0s;
}

input:hover {
  background-size: 100% 100%;
}

демонстрация codepen