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?

that didnt change anything.. my transition is too quick idk why — helpmeplz, Oct 28 '21 at 00:16
sorry i thought you were trying to let it like the first gif — L777, Oct 28 '21 at 00:19
Does this answer your question? [Use CSS3 transitions with gradient backgrounds](https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — L777, Oct 28 '21 at 00:23

Tsolov · Answer 1 · 2021-10-28T01:14:29.373

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>

Div Button hover: transition linear gradient

1 Answers1