CSS：悬停过渡时按钮边框渐变反转

我正在设置这个按钮转换，我发现我在我的网页中用于其他按钮的效果，与这个不太好。 边框颜色在过渡时反转

我必须使用渐变背景，所以改变它不是一个选项

#按钮{
背景：线性渐变（#FFF，#FFF）填充框，线性渐变（向右，蓝色0%，绿色100%）边框框；
边框：3倍纯色透明；
颜色：#000；
背景色：白色；
边界半径：25px；
边缘顶部：60像素；
边缘底部：0px；
字号：600；
字体大小：14px；
填充：7px 22px；
过渡：所有。5s轻松；
左边距：自动；
右边距：自动；
显示：块；
}
#按钮：悬停{
背景：线性渐变（向右，蓝色0%，绿色100%）；
边框：3倍纯色透明；
颜色：#FFF；
过渡：所有。5s轻松；
过渡性质：全部；
过渡时间：0.5s；
过渡时间功能：轻松；
转换延迟：0s；
}

---

按钮

您的悬停/焦点渐变应该是

边框框

：

background: linear-gradient(to right, blue 0%, green 100%) border-box;

.myb{
显示：内联块；
光标：指针；
背景：线性渐变（#FFF，#FFF）填充框，线性渐变（向右，蓝色0%，绿色100%）边框框；
边框：3倍纯色透明；
颜色：#000；
背景色：白色；
边界半径：25px；
边缘顶部：60像素；
边缘底部：0px；
字号：600；
字体大小：14px；
填充：7px 22px；
过渡：所有。5s轻松；
左边距：自动；
右边距：自动；
}
.myb:悬停，
.myb：聚焦{
背景：线性渐变（向右，蓝色0%，绿色100%）边框框；
边框：3倍纯色透明；
颜色：#FFF；
过渡：所有。5s轻松；
过渡性质：全部；
过渡时间：0.5s；
过渡时间功能：轻松；
转换延迟：0s；
}

按钮

这里是一个过渡的概念，您可以在其中使用背景大小：

#按钮{
背景：
线性渐变（#FFF，#FFF）填充框中心，
线性渐变（向右，蓝色0%，绿色100%）边框框；
背景尺寸：100%100%，自动；
背景重复：无重复；
边框：3倍纯色透明；
颜色：#000；
边界半径：25px；
保证金：60像素自动0；
字号：600；
字体大小：14px；
填充：7px 22px；
过渡：所有。5s轻松；
显示：块；
}
#按钮：悬停{
背景尺寸：0，自动；
颜色：#FFF；
}

---

按钮

你可以提供你的html代码吗？你可以简单地创建一个代码片段，这样你以前的进展的生活视图就可以看到：）这些动画真的很酷！非常感谢。但是我从设计师那里得到了这个设计，他并不真的喜欢这些变化。。。哈哈，但我喜欢它；）