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>

Answer 1

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 .

Answer 2

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>

Answer 3

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>