此问题已在此处有答案：

Use CSS3 transitions with gradient backgrounds（20个回答）
4天前关闭。

.buttons a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1%;
  font-size: 20px;
  font-family: "Montserrat", monospace;
  font-weight: 800;
  transition: 0.5s ease;
  border: #fff solid;
  border-radius: 12px;
  border-width: 3px;
}

.inst {
  background: none;
  transition: 2s ease;
}

.inst:hover {
  background: linear-gradient(125deg, #5E529C, #AD3B8D, #E4243E, #F27F46, #FBC24E);
}

<div class="buttons">
  <a href="http://t.me/adilkhanalimberdi" target="_blank" class="tg">Telegram</a>
  <a href="https://www.instagram.com/adilkhanarts/" target="_blank" class="inst">Instagram</a>
</div>

我写了一个transition: 0.5s easy;，但它不起作用，理想情况下，背景和边框应该沿着渐变和文本颜色平滑过渡：没有一个也不行。