Создание кнопки без верхней границы и нижней границы

button {
  padding-inline: .75em;
  border-radius: 100px;
  line-height: 1.3em;
  font-size: 35px;
  border: none;
  --g: #0000 calc(97% - 4px), red calc(100% - 4px);
  background: 
    radial-gradient(100% 50% at left ,var(--g)) right,
    radial-gradient(100% 50% at right,var(--g)) left ;
  background-size: calc(1.3em/2) 100%; /* same as line-height here */
  background-repeat: no-repeat;
}

<button>Button</button>

    button {
         border-radius: 1000px;
         border: solid black 2px;
         border-top: 0;
         border-bottom: 0;
         background: unset
    }

<button>Click Here</button>

/* Solution 1: Hide border-top & border-bottom */
.fancy-btn-1a {
  display: inline-block;
  padding: 10px 24px;

  border-radius: 100px;
  border: 6px solid red;
  border-bottom-color: white;
  border-top-color: white;
}
.fancy-btn-1b {
  display: inline-block;
  padding: 10px 24px;
  
  border: 6px solid red;
  border-radius: 100px;
  border-top: none;
  border-bottom: none;
}

/* Solution 2: Use ::before, ::after to make border-left & border-right */
.fancy-btn-2 {
  display: inline-block;
  padding: 10px;
  box-sizing: border-box;
  
  position: relative;
  left: 20px;
}
.fancy-btn-2::before,
.fancy-btn-2::after {
  content: '';
  display: block;
  width: 21px;
  height: 100%;
  
  border: 6px solid red;
  
  position: absolute;
  top: -2px;
}
.fancy-btn-2::before {
  left: -20px;
  border-right: none;
/*   border-right-color: white; */
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
.fancy-btn-2::after {
  right: -20px;
  border-left: none;
/*   border-left-color: white; */
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}

/* Solution 3: Use ::before, ::after to make border-top & border-bottom */
.fancy-btn-3 {
  display: inline-block;
  padding: 10px 24px;
  box-sizing: border-box;
  
  border: 6px solid red;
  border-radius: 100px;
  position: relative;
}
.fancy-btn-3::before,
.fancy-btn-3:after {
  content:"";
  display: block;
  width: calc(100% - 40px);
  height: 6px;
  background: white;
  
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.fancy-btn-3::before {
  top: -6px;
}
.fancy-btn-3::after {
  bottom: -6px;
}

/* Solution 4: Use ::after, background-color, border-image & clip-path */
.fancy-btn-4 {
  display: inline-block;
  padding: 10px 24px;
  margin-left: 6px;
  box-sizing: border-box;
  position: relative;
 
  border-radius: 100px;
  background-color: white;
}
.fancy-btn-4::after {
  content: '';
  
  position: absolute;
  inset: -6px;  /* same as "top: -6px; bottom: -6px; left: -6px; right: -6px;" */
  bottom: -5.6px; /* I don't know why border-image cannot completely cover here */
  z-index: -1;
  
  background-color: red;
  border: 6px solid red;
  border-image: linear-gradient(to right, red 20%, #fff 20%, #fff 80%, red 80%);
  border-image-slice: 1;
  clip-path: inset(0 round 100px);
}

/* Solution 5:
   The shortest & easiest way! 
   Use background: (background-image, background-clip,...) 
*/
.fancy-btn-5 {
  width: fit-content;
  padding: 10px 24px;
  text-align: center;
  
  border: double 6px transparent;
  border-radius: 100px;
  background-origin: border-box;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, red 22%, #fff 22%, #fff 78%, red 78%);
  background-clip: padding-box, border-box;
}

<div class = "fancy-btn-1a">
  Button 1a
</div>

<div class = "fancy-btn-1b">
  Button 1b
</div>

<br/><br/>

<div class = "fancy-btn-2">
  Button 2
</div>

<br/><br/>

<div class = "fancy-btn-3">
  Button 3
</div>

<br/><br/>

<div class = "fancy-btn-4">
  Button 4
</div>

<br/><br/>

<div class = "fancy-btn-5">
  Button 5
</div>