JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <button class="btn-gradient-1">Button One</button>
  <button class="btn-gradient-2">Button Two</button>
</div>

CSS

.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}
 
.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}
 
.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: red
}