CodePen

HTML

            
              <div class="clip">
  <div class="grad"></div>
</div>

<button><a href="#">Hover Me</a><span></span></button>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html
  padding: 30px
.clip
  width: 400px
  height: 300px
  overflow: hidden
  margin-bottom: 30px
.grad
  position: relative
  width: 400px
  height: 900px
  background: linear-gradient(top, yellow, blue)
  animation: infinite_gradient 4s linear infinite

@keyframes infinite_gradient
  0%, 100%
    transform: translateY(-300px)
  50%
    transform: translateY(0)
  
button
  border: 0
  width: 200px
  height: 40px
  overflow: hidden
  display: block
  padding: 0
  cursor: pointer
span
  height: 120px
  display: block
  background: linear-gradient(top, yellow, blue)
  transform: translateY(-80px)
  &:hover
    animation: button_gradient 400ms linear forwards
a
  position: relative
  z-index: 11
  line-height: 40px
  text-decoration: none
  color: #fff
 
@keyframes button_gradient
  100%
    transform: translateY(-40px)
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................