How to create rounded gradient pushbutton with different gradient in left and right side:

Tried style

.gradient-hover-effect {
    background: linear-gradient(90deg, #3f51b5, transparent) #2196f3;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:xx-large;
    padding: 1em;
    color: #fff;
    text-decoration: none;
    transition: background-color 1s;
    place-content: center;
}

but this produces not so nice button:

Using Google Chrome browser in model tablet.