I have a button that is on top of an element with an animated gradient. What I'd like to happen is for the button's background to be white and the text to be transparent so it reveals the animated gradient behind the button. I'm assuming this is possible somehow, but I am stuck. 

Here is what I have so far...

```css
    .gradient {
      width: 100%;
      height: 500px;
      text-align: center;
      background: linear-gradient(135deg, #53abdf 0%, #019c92 16%, #a1b524 37%, #a1b524 53%, #ea9c2e 70%, #db4025 85%, #db4025 85%);
      background-size: 200% 100%;
      padding-top: 100px;
      -webkit-animation: moveGradient 40s ease infinite;
    }
    .button {
      color: #fff;
      text-decoration: none;
      font-family: arial, sans-serif;
      font-weight: bold;
      font-size: 30px;
      border: 4px solid #fff;
      padding: 20px;
    }
    .button:hover {
      background-color: #fff;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation: moveGradient 40s ease infinite;
    }
    @-webkit-keyframes moveGradient {
      0% {
        background-position: 0% 47%
      }
      50% {
        background-position: 100% 54%
      }
      100% {
        background-position: 0% 47%
      }
    }
```

```html
<div class="gradient">
  <a class="button" href="#">Button</a>
</div>
```

<http://jsfiddle.net/dmcgrew/q69915k3/>