title: How to put transition on background (color to radial-gradient)
body: <p>I have an element with background set as color</p>
  
  <p>On hover background is set as <code>radial-gradient</code></p>
  
  <p>I want to make transition between colors on hover but it creates weird effect where my element disappear for a second.</p>
  
  <p>Here is link </p>
  
  <p><a href="https://jsfiddle.net/a9cqme1y/" rel="nofollow noreferrer">Link</a></p>
  
  <p>Is it possible to switch between color and gradient without this problem?</p>
  
  <pre><code>.link {
    display: block;
    position: absolute;
    bottom: 20%;
    padding: 0 25px;
    height: 42px;
    line-height: 42px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    background: red;
    color: white;
    transition: all 0.3s ease-in-out;
  }
  
  .link:hover {
    text-decoration: none;
    background: radial-gradient(98px 98px at center center, red 0%, #0088b5 100%);
  }
  </code></pre>