Div Button 懸停：過渡線性漸變

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>