我已经创建了一个代码片段，其中包含您的前任旧按钮，您的新按钮和一个修订的旧按钮。
我将测量单位从基于viewport大小的单位改为明确定义的单位，从em & vw/vh改为px，这样按钮设计就可以保持一致，无论viewport大小如何。
一些CSS属性在添加了特定的宽度和高度后变得多余，所以我删除了不再相关的属性。
如果按钮需要调整屏幕大小，你可以使用媒体查询来完成这一点。我添加了一个600 px宽的较小屏幕尺寸的示例：

.Button-transparent03 {
  display: inline-flex;
  height: 6vh;
  width: 17vw;
  line-height: 2em;
  padding: 0.2em;
  margin: 0.3em;
  border: 6px solid #2b547e;
  border-radius: 13px;
  font-size: 1vw;
  font-weight: bold;
  text-align: center;
  /*   display: flex; */
  justify-content: center;
  align-items: center;
  background-color: transparent;
  word-wrap: break-word;
}

.Button-transparent03:hover {
  color: #001f3f;
  /*    background-color: white; */
  background-image: url("/buttons/WTR-landscape.jpg");
  color: white;
}

/* NEW */

/* Hot Topic Button */

.Button-solid {
  display: inline-flex;
  color: white;
  border: 6px solid #5ce1e6;
  border-radius: 13px;
  font-family: Arial;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-size: 18px;
  font-weight: bold;
  background-color: #083f5c;
  padding: 10px;
  outline: none;
}

.Button-solid:hover {
  font-size: 18px;
  color: white;
  background-color: #083f5c;
}

/* REVISED OLD */

.New-Button-transparent03 {
  display: inline-flex;
  height: 35px;
  width: 150px;
  margin: 7px;
  border: 6px solid #2b547e;
  border-radius: 13px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  word-wrap: break-word;
}

.New-Button-transparent03:hover {
  color: #001f3f;
  background-image: url("/buttons/WTR-landscape.jpg");
  color: white;
}

@media all and (max-width: 600px) {
  .New-Button-transparent03 {
    display: inline-flex;
    height: 25px;
    width: 120px;
    margin: 4px;
    border: 3px solid #2b547e;
    border-radius: 7px;
    font-size: 7px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    word-wrap: break-word;
  }
}

个字符

是的，这是因为你使用的是视口单位。另外，你不需要设置按钮的宽度和高度，使用填充来控制按钮的大小。

.btn-1 {
    padding: 10px 20px;
    border: 6px solid #2b547e;
    border-radius: 13px;
    font-size: 20px;
    font-weight: bold;
    background-color: transparent;
}

个字符
p.s你不需要使用CSS将按钮文本居中，它默认居中。