Search code examples
cssinputform-submit

Sweep to the right transition css

I have a submit button which i need to sweep its background from left to right:

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

I need something like sweep to the right transition. All samples are for button , a , li and Div tags.

Solution

  • You could try to animate the background-size property to simulate this effect

        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%;
    }
    <input type="text" value="Sweep to the right" />