这应该对你有用border-radius: 5%/100%;
这里有更多关于它的细节：https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

尝试使用rem。它是响应tho。

.button-in-main-box{
    background-color: #04AA6D;
    border:1px solid ;
    height: 15px;
    padding: 15px 0;
    width: 40%;
    border-radius: 20rem;
    display: block;
    text-align: center;
}

<span class = button-in-main-box>Löse Aufgabe</span>

border-radius属性定义了元素角的半径，有时根据您想要实现的目标，它可以使用多个值。
一个简单的规则

/* If one value is set, `radius` applies to all 4 corners. */
    border-radius: 15px;

/* If two values are set, the first applies to top-left and 
   bottom-right corner, the second applies to top-right and 
   bottom-left corner. */
   border-radius: 15px 15px;

/* Three values: The second value applies to top-right and 
   also bottom-left. */
   border-radius: 15px 15px 15px;

/* Four values apply to the top-left, top-right, bottom- 
     right, bottom-left corner */
   border-radius: 15px 15px 15px 15px;

请记住，percentages是指border box的相应dimension。
您可以在percentages中指定border-radius的值。这在想要创建circle或elipse形状时特别有用。

/* create a circle */
border-radius: 50%;

尝试使用rem或em单位。Rem相对于html文档的根字体大小，em相对于元素或最近父元素的字体大小。

.button-in-main-box{
    background-color: #04AA6D;
    border:1px solid ;
    height: 15px;
    padding: 15px 0;
    width: 40%;
    border-radius: 6.25rem;
    display: block;
    text-align: center;
}

<span class = button-in-main-box>Löse Aufgabe</span>

看起来border-radius的值取决于包含height + padding的按钮的height。
你可以在css var(--myCssVar)和calc()中设置和使用这两个值。它会自适应设置为border-radius.的值。
示例：

.button-in-main-box {
  /* update using css var to calculate border-radius according to height + padding */
  --height: 15px;
  --padding: 15px;
  box-sizing: content-box;/*keep it that way */
  height: var(--height);
  padding: var(--padding) 0;
  border-radius: calc(var(--height) + var(--padding));
  
  /* original op's rules */
  background-color: #04AA6D;
  border: 1px solid;
  width: 40%;
  display: block;
  text-align: center;
}

<span class="button-in-main-box">Löse Aufgabe</span>
<hr> give it a different height and padding via a reset of CSS var() used

<span class="button-in-main-box" style="--height:30px;--padding:40px">Löse Aufgabe</span> what about font-size and em ?

<span class="button-in-main-box" style="font-size:10px;--height:1.5em;--padding:0.5em">Löse Aufgabe</span>

资源：

• CSS变量

https://developer.mozilla.org/en-US/docs/Web/CSS/var()
var() CSS函数可用于插入自定义属性的值（有时称为“CSS变量”），而不是其他属性值的任何部分。

• CSS calc()函数

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
calc() CSS函数允许您在指定CSS属性值时执行计算。它可以在允许<length>、<frequency>、<angle>、<time>、<percentage>、<number>或<integer>的任何地方使用。

解决方案border-radius: 50%;仅适用于基础框形状为正方形的完全圆形按钮，但问题更多的是考虑到按钮是矩形框，仅使按钮的两端变圆（或半圆）。
正如上面提到的一个答案，calc（）方法用来计算按钮的高度，然后将半径设置为它的一半似乎是最合乎逻辑的。然而，这是一个复杂的解决方案。
更简单的解决方案是将一个非常高的值设置为border-radius属性。同样，高值，如100 px，200 px，如果按钮很大，在某些情况下仍然是不够的。所以一个常见的做法是设置border-radius: 100vh;。只要按钮的高度是200 vh或更大，它就可以工作。我们通常不需要“不要让按钮比viewport大，如果不滚动页面就不能完全看到。
我知道这种做法是有效的，但面对给定的问题，我试图探究其中的原因，却找不到任何直接的答案;但通过添加不同的拼图，我得出以下结论：
为border-radius设置一个值（而不是四个）是一种简写，它会根据给定的值对所有四个值进行求值。因此，border-radius: 10px;转换为border-radius: 10px 10px 10px 10px;-其中每个值表示每个角（从左上角开始，顺时针方向）。但这不是真实的的手写体。相反，真正的手写体版本如下所示：border-radius: 25px 10px 15px 20px / 10px 10px 15px 20px;-其中第一组四个值是四个角的水平半径，第二组（在'/'之后）表示角的垂直半径。
就像当给定一个值而不是四个时，该值等同于所有四个位置;同样，如果我们跳过'/'的一侧，则另一侧与给定值相等。因此，如果没有单独指定任何角的水平半径和垂直半径，则该逻辑试图使它们相等。
当我们应用%值时，它们被绑定到本地的宽度和高度。对于一个宽度为200 px，高度为40 px的按钮框，指定border-radius: 50%;会使每种类型的半径独立绑定-即水平半径为宽度的50% = 100 px，垂直半径为高度的50% = 20 px。它会产生一个椭圆形状。
但是有了vh这样的全局维度（视口高度），该规范首先在一个像素值中进行评估，然后对所有进行等同。但由于像素值大于高度的一半是没有意义的（这将使两个相邻的拐角曲线重叠-这是不允许的），它是两个值中的最小值-指定值和高度的一半。然后相同的最小值被复制到所有位置。因此，我们的按钮得到了border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;的转换规格，我们得到了所需的按钮形状，保留了矩形形式，但只有两端看起来像半圆。

**免责声明：**以上是我从border-radius上的各种来源中所读到的内容。请更新我的想法中的任何谬误或任何其他对这种现象的直接解释。