HTML/CSS 渐变 link 框不调整大小

Question

我有一个 link，我希望它看起来像一个带有渐变背景的按钮。这在文本很短时效果很好，但当文本较长且屏幕变小时，文本会换行，看起来很糟糕。周围的“按钮”框看起来像是在末端被切掉了，包裹的部分粘在下面，所以它不再是一个带有弧形角的矩形。相反，我想要调整大小并保持矩形的背景“按钮”框。

.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

不要使用 link 上的默认内联样式，而是使用内联块：

.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>

HTML/CSS 渐变 link 框不调整大小

HTML/CSS Gradient link box does not resize

html

css

hyperlink