Button Hover Swipe

Making a button with a background hover that appears to move across the screen is very easy with CSS gradients.

The key things needed here are:

button {
    color: #aaa;
    background-color: darkRed;
    background-image: linear-gradient(to bottom, green green);
    background-repeat: no-repeat; /* easy to forget but necessary for this */
    transition: 0.6s ease-out, color 0.1s 0.6s;
}
button:hover {
    color: #fff;
    background-size: 100% 100%;
}

This method relies on the fact that any background-image will be stacked above the background-color.

The gradient is not actually a gradient at all since the two colour stops are the same colour. It’s direction is not important either. The direction is defined by the background-size X and Y starting values. If the starting X value is zero and the Y value 100% as the gradient expands it will do so along the X axis (left/right).

If background-repeat: no-repeat is left out the background color disappears, presumably blocke byt the repeating no-width background.

Conclusion

This is a significantly easier way to make a button swipe. However as one reader of the Smashing Mag article pointed out:

There is one drawback: performance. Animating background-blend or background-size doesn’t perform as well as animating opacity or transform

I’m not sure how big that drop is though or how significant it is. Using pseudo-elements is more complicated to write but there is also far more customization possible.