KPC
Kevin Powell - Community•2y ago
Gümrah

Button hover effect working reversely

When I mouse over the button, transition effect only works after leaving from it. Can u help me please? Live: https://results-summary-component-git-main-gsindar.vercel.app/ Code: 
button {
    width: 100%;
    margin: 0 auto;
    border: none;
    border-radius: 8rem;
    background: $neutral-darkGrayBlue;
    color: $neutral-white;
    padding: 1rem;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 1s ease-in;

    &:hover {
      background: linear-gradient(
        $gradient-bg-lightSlateBlue,
        $gradient-bg-lightRoyalBlue
      );
    }
  }
button {
    width: 100%;
    margin: 0 auto;
    border: none;
    border-radius: 8rem;
    background: $neutral-darkGrayBlue;
    color: $neutral-white;
    padding: 1rem;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 1s ease-in;

    &:hover {
      background: linear-gradient(
        $gradient-bg-lightSlateBlue,
        $gradient-bg-lightRoyalBlue
      );
    }
  }
2 Replies
Kevin Powell
Kevin Powell•2y ago
You can't transition to/from a gradient. When you leave, the background is the light gray default of the button (cause it instantly turns off the gradient), and that transitions to your dark color background is a shorthand. You have background-color and background-image, and we can't transition between two different properties (also, background-image can't can't be animated/transitioned, so that means gradients can't be.)
Gümrah
GümrahOP•2y ago
Thank you Kevin 🙏

Did you find this page helpful?