Div按钮悬停:过渡线性梯度

Question

你好，我有一个div，里面有标签和标签来创建一个按钮，像这样:

https://media.giphy.com/media/LXBvjTlqqPZNxB0Mtr/giphy.gif

然而，我没有得到我想要的线性渐变css悬停过渡效果:像这样:https://media.giphy.com/media/Db7n9RI9a6OrLh2XlP/giphy.gif

我的HTML框架是这样的:

<div class="address-btn">
<a href="#">Copy Address</a>
<i class="fas fa-wallet"></i>
</div>

这是我的CSS

.address-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 5px;
transition: all 1s ease;
cursor: pointer;
border: 2px;
color: #fff;
background: linear-gradient(to right, #2393ff 0%, #5f01ff 100%);
border-radius: 3px;
a {
color: #fff;
text-decoration: none;
margin-right: 10px;
font-size: 13px;
}

&:hover {
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
background: linear-gradient(to right, #5f01ff 0%, #2393ff 100%);
}

为什么我没有得到与正确的相同的效果?

Answer 1

一切正常。你错过了}和…看这个

.address-btn{
display: flex;
justify-content: center;
align-items: center;
padding: 15px 5px;
transition: all 1s ease;
cursor: pointer;
border: 2px;
color: #fff;
background: linear-gradient(to right, #2393ff 0%, #5f01ff 100%);
border-radius: 3px;
}
.address-btn:hover{
background: linear-gradient(to right, #5f01ff 0%, #2393ff 100%);
}
a{
color: #fff;
text-decoration: none;
margin-right: 10px;
}

<div class="address-btn">
<a href="#">Copy Address</a>
</div>