gradientBtn.css

body {
    margin : 0;
    padding : 0;
    background: #f1f1f1;
}

.container {
    position : absolute;
    left : 50%;
    top : 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn {
    border: none;
    margin : 20px;
    padding: 24px;
    width: 220px;
    font-family : "monsterrat", sans-serif;
    text-transform: uppercase;
    border-radius : 6px;
    cursor : pointer;
    color : #fff;
    background-size : 200%;
    transition : 0.6s;
}

.btn1 {
    background-image: linear-gradient(to left, #FFC312, #EE5A24, #FFC312);
}

.btn2 {
    background-image: linear-gradient(to left, #74b9ff, #0984e3, #74b9ff);
}

.btn3 {
    background-image: linear-gradient(to left, #55efc4, #00b894, #55efc4);
}

.btn4 {
    background-image: linear-gradient(to left, #fab1a0, #e84393, #fab1a0);
}

.btn:hover {
    background-position: right;
}