JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">Sign Up</div>

CSS

body {
  background:black;
  --border: 5px;
}

div.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 50px;
  border-radius: 30px;
  
  /*try 1*/
  
  /*background-color: rgba(255, 255, 255, 0.25);
    border: 2px solid transparent;
    background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15));*/
    
    /*try 1*/
    
    /*try 2*/
   
   /*border: var(--border) solid transparent;
    background: linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 1)), linear-gradient(to bottom, rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.2)) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
    background-clip: content-box, border-box;
    margin: 10px auto;
    mix-blend-mode: multiply;*/
    
    /*try 2*/
    
    /*try 3*/
     background: linear-gradient(white, white) padding-box,
        linear-gradient(to right, red, blue) border-box;
    border: 4px solid transparent;
    /*try 3*/
    
}