CSS:悬停时过渡时按钮边框渐变反转
CSS: Button border gradient invert when transition on hover
我正在设置这个按钮转换,我发现我在我的网络中用于其他按钮的效果与这个按钮效果不佳。
边框颜色在过渡时反转。
我必须使用渐变背景,所以不能更改它。
#button {
background: linear-gradient(#FFF,#FFF) padding-box, linear-gradient(to right, blue 0%, green 100%) border-box;
border: 3px solid transparent;
color: #000;
background-color: white;
border-radius: 25px;
margin-top: 60px;
margin-bottom: 0px;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
margin-left: auto;
margin-right: auto;
display: block;
}
#button:hover{
background: linear-gradient(to right, blue 0%, green 100%);
border: 3px solid transparent;
color: #FFF;
transition: all .5s ease;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
<button id="button"> BUTTON </button>
你的hover/focus渐变应该是border-box
:
background: linear-gradient(to right, blue 0%, green 100%) border-box;
.myb {
display: inline-block;
cursor: pointer;
background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(to right, blue 0%, green 100%) border-box;
border: 3px solid transparent;
color: #000;
background-color: white;
border-radius: 25px;
margin-top: 60px;
margin-bottom: 0px;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
margin-left: auto;
margin-right: auto;
}
.myb:hover,
.myb:focus {
background: linear-gradient(to right, blue 0%, green 100%) border-box;
border: 3px solid transparent;
color: #FFF;
transition: all .5s ease;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
<div class="myb">
Button
</div>
也在 JSFiddle.
这是一个过渡的想法,您可以在其中使用背景大小:
#button {
background:
linear-gradient(#FFF,#FFF) padding-box center,
linear-gradient(to right, blue 0%, green 100%) border-box;
background-size:100% 100%,auto;
background-repeat:no-repeat;
border: 3px solid transparent;
color: #000;
border-radius: 25px;
margin: 60px auto 0;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
display: block;
}
#button:hover{
background-size:0 0,auto;
color: #FFF;
}
<button id="button"> BUTTON </button>
您可以通过调整大小和位置来修改:
#button {
background:
linear-gradient(#FFF,#FFF) padding-box left,
linear-gradient(to right, blue 0%, green 100%) border-box;
background-size:100% 100%,auto;
background-repeat:no-repeat;
border: 3px solid transparent;
color: #000;
border-radius: 25px;
margin: 60px auto 0;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
display: block;
}
#button:hover{
background-size:0 100%,auto;
color: #FFF;
}
<button id="button"> BUTTON </button>
我正在设置这个按钮转换,我发现我在我的网络中用于其他按钮的效果与这个按钮效果不佳。 边框颜色在过渡时反转。
我必须使用渐变背景,所以不能更改它。
#button {
background: linear-gradient(#FFF,#FFF) padding-box, linear-gradient(to right, blue 0%, green 100%) border-box;
border: 3px solid transparent;
color: #000;
background-color: white;
border-radius: 25px;
margin-top: 60px;
margin-bottom: 0px;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
margin-left: auto;
margin-right: auto;
display: block;
}
#button:hover{
background: linear-gradient(to right, blue 0%, green 100%);
border: 3px solid transparent;
color: #FFF;
transition: all .5s ease;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
<button id="button"> BUTTON </button>
你的hover/focus渐变应该是border-box
:
background: linear-gradient(to right, blue 0%, green 100%) border-box;
.myb {
display: inline-block;
cursor: pointer;
background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(to right, blue 0%, green 100%) border-box;
border: 3px solid transparent;
color: #000;
background-color: white;
border-radius: 25px;
margin-top: 60px;
margin-bottom: 0px;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
margin-left: auto;
margin-right: auto;
}
.myb:hover,
.myb:focus {
background: linear-gradient(to right, blue 0%, green 100%) border-box;
border: 3px solid transparent;
color: #FFF;
transition: all .5s ease;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
<div class="myb">
Button
</div>
也在 JSFiddle.
这是一个过渡的想法,您可以在其中使用背景大小:
#button {
background:
linear-gradient(#FFF,#FFF) padding-box center,
linear-gradient(to right, blue 0%, green 100%) border-box;
background-size:100% 100%,auto;
background-repeat:no-repeat;
border: 3px solid transparent;
color: #000;
border-radius: 25px;
margin: 60px auto 0;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
display: block;
}
#button:hover{
background-size:0 0,auto;
color: #FFF;
}
<button id="button"> BUTTON </button>
您可以通过调整大小和位置来修改:
#button {
background:
linear-gradient(#FFF,#FFF) padding-box left,
linear-gradient(to right, blue 0%, green 100%) border-box;
background-size:100% 100%,auto;
background-repeat:no-repeat;
border: 3px solid transparent;
color: #000;
border-radius: 25px;
margin: 60px auto 0;
font-weight: 600;
font-size: 14px;
padding: 7px 22px;
transition: all .5s ease;
display: block;
}
#button:hover{
background-size:0 100%,auto;
color: #FFF;
}
<button id="button"> BUTTON </button>