/* HTML */
<a href="#"><button class="button-28">hover me</button></a>

/* CSS */
.button-28 {
    border: none;
    position: relative;
    width: 150px;
    height: 40px;
    border-radius: 5px;
    background-color: green;
    color: #ffff;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;    
}
.button-28:hover {
    background: linear-gradient(45deg, #ff0077, #2d76ff,
                                #2ccf6d, #ffb923, #ff0077);
    background-size: 400%;
    z-index: 1;
    animation: glow 8s linear infinite;                            
}
.button-28::before {
    content: "";
    position: absolute;
    background: inherit;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: 10px;
    filter: blur(20px);
    opacity: 0;
    transition: opacity .5s;
}
.button-28:hover::before {
    opacity: 1;
    z-index: -1;
}
@keyframes glow {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}