按钮样式实现：将纯色转为渐变且不破坏动画效果

我获取了以下代码并做了一些修改，以复刻我喜欢的按钮样式与功能，但在将纯色背景改为渐变背景时遇到问题，会破坏原有动画效果，希望能得到帮助解决该问题。

原按钮效果 #

现有代码 #

CSS #

.button-file {
  position: relative;
  text-align: center;
  z-index: 0;
  border-radius: 30px;
  max-width: 180px;
  max-height: 46px;
  overflow: hidden;
  height: 70px;
  padding-top: 10px;
  color: #fff;
}

.button-file::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 400px;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#38718F, #38718F 0%), linear-gradient(#38718F, #38718F), linear-gradient(#D0555A, #D0555A), linear-gradient(#D0555A, #D0555A);
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .7s cubic-bezier(1, 0, 0, 1);
}

.button-file:hover::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.button-file::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 3px;
  top: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 30px;
}

HTML #

<div class="background">
  <div class="button-file">
    <a><b>Contact us</b></a>
  </div>
</div>

修改后异常效果 #

解决方案 #

问题根源是原动画依赖四个角落的纯色区块旋转切换，直接替换成渐变会打乱背景定位逻辑。调整如下：

修改后的CSS代码 #

.button-file {
  position: relative;
  text-align: center;
  z-index: 0;
  border-radius: 30px;
  max-width: 180px;
  max-height: 46px;
  overflow: hidden;
  height: 70px;
  padding-top: 10px;
  color: #fff;
}

.button-file::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 400px;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  /* 将每个角落的纯色替换为渐变 */
  background-image: 
    linear-gradient(135deg, #38718F, #2c5a72), 
    linear-gradient(135deg, #38718F, #2c5a72), 
    linear-gradient(135deg, #D0555A, #b84a4e), 
    linear-gradient(135deg, #D0555A, #b84a4e);
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .7s cubic-bezier(1, 0, 0, 1);
}

.button-file:hover::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.button-file::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 3px;
  top: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 30px;
  /* 按钮内部添加渐变，保持风格统一 */
  background: linear-gradient(135deg, #4a8aa8, #38718F);
}

说明 #

• 保留原有的四个角落背景区块结构，将每个纯色区块替换为对应渐变，确保旋转动画逻辑不受影响
• 给::after伪元素添加渐变背景，让按钮内外风格统一
• 维持原动画过渡效果，hover时的旋转切换正常生效

内容的提问来源于stack exchange，提问作者Yanna