Creating Gradient button Using HTML & CSS only – Sheikh Asif

body{
    background-color: rgb(2, 13, 33);
}
button{
    margin-top: 50px ;
    margin-left: 50px;
    position: absolute;
    border: none;
    color: #ffffff;
    width: 9em;
    height: 3em;
    line-height: 2em;
    text-align: center;
    background:linear-gradient(
        90deg, #03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 300%;
    border-radius: 30px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 1;
}
button.hover{
    animation: animation 8s linear infinite;
    border: none;
}
@keyframes animation {
    0% ( background-position:0%; )
    100% ( background-position: 40%)
}
button::before{
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background:linear-gradient(
        90deg, #03a9f4,#f441a5,#ffeb3b,#03a9f4);
        background-size: 400%;
        border-radius: 35px;
        transition: 1s;
}
button:hover::before{
    filter: blur(20px);
}

<button>Hover Me</button>