如何将工作过渡到与后台使用情况的边界-解网

问：

.mainButton {
  font-size: 5em;
  font-weight: 600;
  text-align: center;
  padding-top: 0px;
  width: 25%;
  height: 12vh;
  font-family: 'Montserrat Alternates';
  background: linear-gradient(black, black) padding-box, rgba(255, 255, 255, 0.50) border-box;
  border: 3px solid transparent;
  color: white;
  border-radius: 60px;
  transition: border-box 0.3s ease-in, box-shadow 0.3s ease-in;
}

.mainButton:hover {
  box-shadow: 0px 0px 70.17722px 1.94937px rgba(171, 77, 252, 0.48);
  backdrop-filter: blur(11.696203231811523px);
  background: linear-gradient(black, black) padding-box, linear-gradient(90deg, #D96CC1, #A871DF, #EAC0F1, #FFFFFF, #CADFEE, #6CB4E9, #4F8BFF, #7269D6) border-box;
  border-radius: 60px;
  border: 3px solid transparent;
  font-size: 5em;
  color: white;
}

<div class="root">
  <button class="mainButton">button</button>
</div>

悬停中的按钮边框有渐变。我想像框影过渡一样进行边框过渡

我试图在边框、背景、填充框、边框上进行过渡，但没有任何效果

HTML CSS 按钮 css-transitions

如何将工作过渡到与后台使用情况的边界

How to make working transition to border with background usage

评论