Why is my CSS or Sass Transition not working?

Question

So I'm trying to make the transition working by 0.5s whenever I hover to the button, but it doesn't work, does anyone has a clue?

this is my code :

.btn {
    display: inline-block;
    background-image: linear-gradient(90deg, #e34067,#f89c4b);
    padding: 1rem 2rem;
    padding-left: 1.4rem;
    align-items: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}
    .btn p {
        padding-left: 0.5rem;
    }
    .btn:hover {
        background-image: linear-gradient(90deg,#f89c4b, #e34067);
    }

<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

Note that adding `type="button"` to a `div` element does nothing, and is invalid HTML to boot... — Heretic Monkey, Jul 28 '20 at 13:35
background image doesnt support transition, check this question https://stackoverflow.com/questions/9483364/css3-background-image-transition — orangespark, Jul 28 '20 at 13:37
Does this answer your question? [CSS3 background image transition](https://stackoverflow.com/questions/9483364/css3-background-image-transition) — orangespark, Jul 28 '20 at 13:37

score 0 · Accepted Answer · edited Jul 28 '20 at 13:36

0

I think you created your button with that div element. So therefore you have to add the btn class to the div. The correct code would be

<div type="button" class="add-photo btn"> <a href="#"><i class="fa fa-plus-circle"></i> <p> Add Photo</p> </a> </div>

I would suggest not to use the div as a button like discussed here.

edited Jul 28 '20 at 13:36

Dharman

30,962
25
85
135

answered Jul 28 '20 at 13:30

Marco

248
3
11

SKeurentjes · Answer 2 · 2020-07-28T14:59:30.250

A gradient is a background image, you can't transition one background image to another like that. You can use pseudo elements to create the effect you want though.

.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 1.4rem;
  align-items: center;
background-color: #f89c4b;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.btn:before,
.btn:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  transition: opacity 0.5s;
}

.btn:before {
  background-image: linear-gradient(90deg, #e34067,#f89c4b);
  opacity: 1;
}

.btn:after {
  background-image: linear-gradient(90deg,#f89c4b, #e34067);
  opacity: 0;
}

  p {
position: relative;
padding-left: 0.5rem;
z-index: 5;
  }

.btn:hover:before {
  opacity: 0;
}

.btn:hover:after {
  opacity: 1;
}

<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

score 0 · Answer 3 · answered Jul 28 '20 at 15:09

The background gradients are not animatable, but you can achieve that effect with background-position.

.btn {
    display: inline-block;
    background-image: linear-gradient(90deg,#f89c4b, #e34067, #f89c4b);
    background-size: 200%;
    background-position: 0 0;
    padding: 1rem 2rem;
    padding-left: 1.4rem;
    align-items: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background-position 0.5s;
}
    .btn p {
        padding-left: 0.5rem;
    }
    .btn:hover {
        background-position: 100% 0px;
    }

<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

Why is my CSS or Sass Transition not working?

3 Answers3