title: Why is my CSS or Sass Transition not working?
body: <p>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?</p>
  <p>this is my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div type="button" class="add-photo"&gt;
    &lt;a class="btn" href="#"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;
        &lt;p&gt;  Add Photo&lt;/p&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>