CODEWITHSUNDEEP
htmlcssanimationbutton
Hyunjin Park
Hyunjin Park

Reputation: 3

How to hover the text with an animated icon

I really need some help. I'm having difficulties with hovering a Prev button. I want this button to roll over with the animated icon. However now, it only rollovers the animated icon, not the text. Here is a screenshot of the button, HTML and CSS code below. Thank you!

Button state now https://vimeo.com/394493039

.link2 {
  color: #000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
}

.link--arrowed2 {
  color: #000;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
}
.link--arrowed2 .arrow-icon2 {
  position: relative;
  top: -1px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  vertical-align: middle;
}
.link--arrowed2 .arrow-icon--circle2 {
  color: #000;  
  -webkit-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}
.link--arrowed2:hover .arrow-icon2 {
    color: #000;
  -webkit-transform: translate3d(-5px, 0, 0);
          transform: translate3d(-5px, 0, 0);
}
.link--arrowed2:hover .arrow-icon--circle2 {
    color: #000;
  stroke-dashoffset: 0;
}
<div grid-row="" grid-pad="1.5" grid-gutter="3" class=""><div grid-col="x11" grid-pad="1.5"><small>
<a class="link link--arrowed2" href="#" rel="prev_page">
    <svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
        <circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
        <path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
      </g>
    </svg></a><a href="#" rel="prev_page"></a><a class="link link--arrowed2" href="#" rel="prev_page"> Prev Project</a></small></div>

Upvotes: 0

Views: 94

Answers (1)

j-petty
j-petty

Reputation: 3026

You're using too many a tags in your html. You only need one anchor tag for each link.

The result is that when you hover over any part of the link your effect will apply.

.link2 {
  color: #000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
}

.link--arrowed2 {
  color: #000;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
}

.link--arrowed2 .arrow-icon2 {
  position: relative;
  top: -1px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  vertical-align: middle;
}

.link--arrowed2 .arrow-icon--circle2 {
  color: #000;
  -webkit-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}

.link--arrowed2:hover .arrow-icon2 {
  color: #000;
  -webkit-transform: translate3d(-5px, 0, 0);
  transform: translate3d(-5px, 0, 0);
}

.link--arrowed2:hover .arrow-icon--circle2 {
  color: #000;
  stroke-dashoffset: 0;
}
<div grid-row="" grid-pad="1.5" grid-gutter="3" class="">
  <div grid-col="x11" grid-pad="1.5">
    <small>
      <a class="link link--arrowed2" href="#" rel="prev_page">
        <svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
          <g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
            <circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
            <path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
          </g>
        </svg>
        <span>Prev Project</span>
      </a>
    </small>
  </div>
</div>

Upvotes: 1

Related Questions