Div Button hover: transition linear gradient

Question

Hello I have a div with tag and tag inside to create a button like this :

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

However I am not getting the linear-gradient css hover transition effect that I want: like this : https://media.giphy.com/media/Db7n9RI9a6OrLh2XlP/giphy.gif

this is how my html skeleton looks liek :

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

and this is my css for it

.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%);
  }

why am i not getting the same effect as the correct one?

Answer 1

Everything work fine. You missed } andd.. look this

 .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>