Как сделать при hover текст другого цвета, стрелку другого цвета и увеличить ее на 20px?

Question

            <div class="button promo__content-button"><a class="link" href="#"><span>&Dcy;&icy;&vcy;&icy;&tcy;&icy;&scy;&yacy; &kcy;&vcy;&acy;&rcy;&tcy;&icy;&rcy;&icy;</span>
                <div class="link__arrow">
                  <svg class="icon--arrow" width="41" height="14" viewbox="0 0 41 14" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
                    <path d="M31.8585 0.490479C32.7075 2.09425 35.4245 5.64142 39.5 6.99991" stroke="#4D4D4C"></path>
                    <path d="M31.8585 13.5094C32.7075 11.9056 35.4245 8.35846 39.5 6.99997" stroke="#4D4D4C"></path>
                    <path d="M0.499999 7L40.5 7" stroke="#4D4D4C"></path>
                  </svg>
                </div></a></div>
          </div>

.link {
    display: flex;
    justify-content: center;
    transition-delay: 0.3s;
    transform: translateX(0);
    opacity: 1;
    transition-duration: 0.7s;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease-in;
    &:hover {
      color: #a6b720;
      cursor: pointer;
    }
    &__arrow {
      margin-left: 15px;
      overflow: hidden;
      pointer-events: none;
      &:hover {
        transform: translateX(20px);
        color: #a6b720;
      }
    }
  }

Answer 1

.link {
  display: flex;
  justify-content: center;
  color: green;
  opacity: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.7s ease-in 0.3s;
}
.link:hover {
  color: red;
}

.link path {
  stroke: blue;
  transition: 0.7s ease-in 0.3s;
}
.link:hover path {
  stroke: orange;
  d: path('M51.8585 0.490479C52.7075 2.09425 55.4245 5.64142 59.5 6.99991 M51.8585 13.5094C52.7075 11.9056 55.4245 8.35846 59.5 6.99997 M0.499999 7L60.5 7');
}

.link__arrow {
  margin-left: 15px;
}

<div class="button promo__content-button">
  <a class="link" href="#">
    <span>&Dcy;&icy;&vcy;&icy;&tcy;&icy;&scy;&yacy; &kcy;&vcy;&acy;&rcy;&tcy;&icy;&rcy;&icy;</span>
    <div class="link__arrow">
      <svg class="icon--arrow" width="61" height="14" viewBox="0 0 61 14" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" stroke="#4D4D4C">
        <path d="M31.8585 0.490479C32.7075 2.09425 35.4245 5.64142 39.5 6.99991 M31.8585 13.5094C32.7075 11.9056 35.4245 8.35846 39.5 6.99997 M0.499999 7L40.5 7"></path>
      </svg>
    </div>
  </a>
</div>

БЛОГ НА HUSL

Как сделать при hover текст другого цвета, стрелку другого цвета и увеличить ее на 20px?

Ответы (1 шт):