Animating Gradient Background with CSS

main.scss

.button {
    display: inline-block;
    color: #fff;
    padding: 20px 30px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    
    background-image: linear-gradient(45deg, #ffc459, #ff6638);
    background-size: auto 200%;
    background-position: 0 100%;
    
    transition: background-position 0.25s ease;
    
    &:hover,
    &:focus {
        background-position: 0 0;
    }
}