.btn[class*="btn-c-gradient-"] {
    padding: 10px 24px;
    text-shadow: none;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    white-space: normal;
    word-wrap: break-word;
    transition: .2s ease-out;
    touch-action: manipulation;
    cursor: pointer;
    text-transform: uppercase;
    background-color: #e9ecef;
    box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1);
    will-change: opacity, transform;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}
.btn-c-gradient-1 { background-image: linear-gradient(to right, #3232b7 0%, #2575fc 100%); }
.btn-c-gradient-1:hover,.btn.btn-c-gradient-1:not(:disabled):not(.disabled):active { background-image: linear-gradient(to right, #2575fc 0%, #3232b7 100%); }
.btn-c-gradient-2 { background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); }
.btn-c-gradient-2:hover, .btn.btn-c-gradient-2:not(:disabled):not(.disabled):active { background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%); }
.btn-c-gradient-3 { background-image: linear-gradient(to right, #00cdac 0%, #38f9d7 100%); }
.btn-c-gradient-3:hover, .btn.btn-c-gradient-3:not(:disabled):not(.disabled):active { background-image: linear-gradient(to right, #38f9d7 0%, #00cdac 100%); }
.btn-c-gradient-4 { background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); }
.btn-c-gradient-4:hover, .btn.btn-c-gradient-4:not(:disabled):not(.disabled):active { background-image: linear-gradient(120deg, #fda085 0%, #f6d365 100%); }
.btn-c-gradient-5 { background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%); }
.btn-c-gradient-5:hover, .btn.btn-c-gradient-5:not(:disabled):not(.disabled):active { background-image: linear-gradient(to top, #fe5196 0%, #f77062 100%); }
.btn-c-gradient-6 { background-image: linear-gradient(to right, #816cfd 0%, #7c5ac2 100%); }
.btn-c-gradient-6:hover, .btn.btn-c-gradient-6:not(:disabled):not(.disabled):active { background-image: linear-gradient(to right, #7c5ac2 0%, #816cfd 100%); }