3 replies

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
      );
    }
  }

KP-C

Kevin Powell - Community•3y ago•

3 replies

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
      );
    }
  }

Button hover effect working reversely

Similar Threads

Button hover effect working reversely

Similar Threads

Similar Threads

Similar Threads