Текст в теге толще остального

Почему-то текст в теге толще остального, и я ума не приложу что на него влияет. Я пробовал font-style: normal и font-weight: normal, но ничего не помогает.

.detail-exercise-bottom-menu-container {
  display: flex;
  flex-direction: column;
}

.detail-exercise-bottom-menu-row1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
}

.detail-exercise-bottom-menu-row1-button {
  padding: 5px 15px 5px 15px;
  background-color: #363636;
  border-radius: 20px;
  color: #BDBDBD;
  font-size: 50px;
  text-decoration: none;
  text-align: center;
  width: 45%;
  font-weight: normal;
  cursor: pointer;
}

.detail-exercise-bottom-menu-row1-input {
  background: 0;
  border: 0;
  color: #BDBDBD;
  font-size: 50px;
  width: 95%;
  cursor: pointer;
  font-style: normal !important;
  font-weight: normal !important;
  text-align: center;
}
<div class="detail-exercise-bottom-menu-container">
  <div class="detail-exercise-bottom-menu-row1">
    <a class="detail-exercise-bottom-menu-row1-button" th:href="@{/exercises/{id}/edit(id=${exercise.getId()})}" th:text="Редактировать" />
    <form class="detail-exercise-bottom-menu-row1-button" th:method="DELETE" th:action="@{/exercises/{id}(id=${exercise.getId()})}">
      <input class="detail-exercise-bottom-menu-row1-input" type="submit" value="Редактировать" />
    </form>
  </div>
  <a class="detail-exercise-bottom-menu-row2-button" href="/exercises">Назад</a>
</div>

Результат

Результат запуска программы


Ответы (1 шт):

Автор решения: Дмытрык

добавьте для кнопки такой же шрифт, как и у инпута font-family: Arial

.detail-exercise-bottom-menu-container {
  display: flex;
  flex-direction: column;
}

.detail-exercise-bottom-menu-row1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
}

.detail-exercise-bottom-menu-row1-button {
  padding: 5px 15px 5px 15px;
  background-color: #363636;
  border-radius: 20px;
  color: #BDBDBD;
  font-size: 50px;
  text-decoration: none;
  text-align: center;
  width: 45%;
  font-weight: normal;
  font-family: Arial;  // изменение
  cursor: pointer;
}

.detail-exercise-bottom-menu-row1-input {
  background: 0;
  border: 0;
  color: #BDBDBD;
  font-size: 50px;
  width: 95%;
  cursor: pointer;
  font-style: normal !important;
  font-weight: normal !important;
  text-align: center;
}
<div class="detail-exercise-bottom-menu-container">
  <div class="detail-exercise-bottom-menu-row1">
    <a class="detail-exercise-bottom-menu-row1-button" th:href="@{/exercises/{id}/edit(id=${exercise.getId()})}" th:text="Редактировать" >Редактировать</a>
    <form class="detail-exercise-bottom-menu-row1-button" th:method="DELETE" th:action="@{/exercises/{id}(id=${exercise.getId()})}">
      <input class="detail-exercise-bottom-menu-row1-input" type="submit" value="Редактировать" />
    </form>
  </div>
  <a class="detail-exercise-bottom-menu-row2-button" href="/exercises">Назад</a>
</div>

→ Ссылка