همه ما ویژگی border-image را می شناسیم که به ما امکان می دهد هر نوع تصویری (از جمله گرادیان ها) را به عنوان حاشیه اضافه کنیم.

<button class="border-gradient border-gradient-purple"> I have a gradient </button>
  
<button class="border-gradient border-gradient-green"> I have a gradient </button>

button {
  background: none;
  text-decoration: inherit;
  font-family: system-ui;
  font-size: 1rem;
  padding: 1rem 2rem;
}

.border-gradient {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
}
.border-gradient-purple {
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.border-gradient-green {
  border-image-source: linear-gradient(to left, #00C853, #B2FF59);
}

💡روش بالا یه مشکلی داره که border-radius رو ساپورت نمیکنه که بجاش میتونید از روش زیر عمل کنید

   button {
        border-radius: 12px;
    }
    button:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -2px;
        /* !important */
        border-radius: inherit;
        /* !important */
        background: linear-gradient(to right, red, orange);
    }