Animated gradient

by denniswaltermartinez

HTML

<button>Submit</button>

CSS

button {
    border-radius: 3px;
    padding: 8px 27px;
    border: 1px solid #A51243;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 1px rgba(255, 255, 255, 0.4) inset;
    outline: none;
    color: #fff;
    font-family: helvetica;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    
    background-color: #C2275B;
    background: linear-gradient(#FF4C88, #A51243);
    background-size: 100px 100px;
    background-attachment: fixed;
    transition: all .2s;
    letter-spacing: .5px;
}

button:hover {
   background-position: 0 -50px;
}

button:active {
    background-position: 0 -50px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2) inset;
}