HTML / CSS Поле ссылки градиента не изменяется

Question

У меня есть ссылка, которая должна выглядеть как кнопка с градиентным фоном. Это хорошо работает, когда текст короткий, но когда текст длиннее, а экран становится меньше, текст переносится и выглядит ужасно. Окружающий прямоугольник «кнопка» выглядит так, как будто он был отрезан на конце, а завернутая часть застряла внизу, так что это уже не один прямоугольник с изогнутыми углами. Вместо этого я хотел бы, чтобы фон «кнопка» изменял размер и оставался прямоугольным angular.

.links {
  text-align: center;
}

.links-button {
  border-top: 1px solid #96d1f8;
  background: linear-gradient(rgb(81, 195, 247), #0a99db);
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  color: #000000;
  font-size: 2rem;
  text-decoration: none;
  vertical-align: middle;
}

<div class="links">
  <a class="links-button" href="/example_link">This is a very long link so will wrap when the screen is made smaller</a>
</div>

Answer 1

Вместо встроенного стиля по умолчанию для ссылки используйте встроенный блок:

.links {
  text-align: center;
}

.links-button {
  border-top: 1px solid #96d1f8;
  background: linear-gradient(rgb(81, 195, 247), #0a99db);
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  color: #000000;
  font-size: 2rem;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

<div class="links">
  <a class="links-button" href="/example_link">This is a very long link so will wrap when the screen is made smaller</a>
</div>