Animating CSS gradient works only if text doesn't wrap - html

Question

This example of animating a gradient in purely CSS works great when the text or thing doesn't wrap like text does at the end of a line. But when wrapping occurs, the gradient breaks and doesn't animate. Here is a slightly modified example to demonstrate. Shrink the screen so you can see the second block of text wrap around the edge, hover over it, and notice it won't animate.
.button {
background-size: 100%;
background-image: linear-gradient(#fff, #ccc);
border-radius: 0.45rem;
border: 1px solid #ddd;
cursor: pointer;
color: #333;
font-size: 1.25rem;
font-weight: 300;
position: relative;
}
.button:before {
border-radius: inherit;
background-image: linear-gradient(#ccc, #fff);
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
opacity: 0;
width: 100%;
z-index: 100;
transition: opacity 0.45s;
}
.button:hover:before {
opacity: 1;
}
<span class='button'>hello</span> i am some text and then <span class='button'>i wrap around the edges</span> and go all the way around
Wondering if there is any way to get this working without using JS.

Answer 1

You can get a similar effect by using a gradient with larger than the display area height, and animating it's position:
.button {
background-size: 100% 150%;
background-position: 0 0;
background-image: linear-gradient(#fff 0, #ccc 50%, #fff 100%);
border-radius: 0.45rem;
border: 1px solid #ddd;
cursor: pointer;
color: #333;
font-size: 1.25rem;
font-weight: 300;
position: relative;
transition: background-position 0.45s;
}
.button:hover {
background-position: 0 100%;
}
<span class='button'>hello</span> i am some text and then <span class='button'>i wrap around the edges</span> and go all the way around