How to make arrow transition on button:hover instead of span:hover?

Question

I have a button with an arrow inside. Currently, the arrow transitions to the right when the arrow inside of the button is hovered, but I would like the arrow to transition when the button is hovered.

button {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    line-height: 22.6px;
    background-color: transparent;
    padding: 16px 32px 16px 40px;
    cursor: pointer;
}
.btn-black {
    border: 4px solid #000000;
    color: #000000;
}
.btn-grey {
    border: 4px solid #45423C;
    color: #45423C;
}
.arrow {
    height: 2px;
    width: 25px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 4px;
}
.arrow:hover {
    transition: all .4s ease;
    width: 35px;
    margin-right: 5px;
}
.arrow-black {
    background: black;
}
.arrow-grey{
    background: #45423C;
}
.arrow:before, .arrow:after {
    content: "";
    background: black;
    position: absolute;
    height: 2px;
    width: 10px;
    border-radius: 30%;
}
.arrow:before {
    right: -2px;
    bottom: -3px;
    transform: rotate(-45deg);
}
.arrow:after {
    right: -2px;
    top: -3px;
    transform: rotate(45deg);
}

<button class="btn-black"><span class="arrow arrow-black"></span>WHO WE ARE</button>

Please add a [minimal reproducable example](https://stackoverflow.com/help/minimal-reproducible-example) to your question, at best in a [stack snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). See https://stackoverflow.com/help/how-to-ask — biberman, May 12 '21 at 19:30
@biberman the link is on the post ( http://jsfiddle.net/sqkpx79n/ ) but in case the code is not showing on js fiddle, I added the code as a snippet as well. Thank you for bringing that to my attention — Carolina Klein, May 12 '21 at 19:31

score 0 · Accepted Answer · answered May 12 '21 at 19:49

You have a transition issue since it is defined only for the hovered arrow. If you move it to .arrow itself the transition is working in both directions. And if you want the "animation" take effect when the button is hovered then define :hover for the button.

Working example:

button {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 22.6px;
  background-color: transparent;
  padding: 16px 32px 16px 40px;
  cursor: pointer;
}

.btn-black {
  border: 4px solid #000000;
  color: #000000;
}

.btn-grey {
  border: 4px solid #45423C;
  color: #45423C;
}

.arrow {
  height: 2px;
  width: 25px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 15px;
  margin-bottom: 4px;
  transition: all .4s ease;
}

button:hover .arrow {
  width: 35px;
  margin-right: 5px;
}

.arrow-black {
  background: black;
}

.arrow-grey {
  background: #45423C;
}

.arrow:before,
.arrow:after {
  content: "";
  background: black;
  position: absolute;
  height: 2px;
  width: 10px;
  border-radius: 30%;
}

.arrow:before {
  right: -2px;
  bottom: -3px;
  transform: rotate(-45deg);
}

.arrow:after {
  right: -2px;
  top: -3px;
  transform: rotate(45deg);
}

<button class="btn-black">
  <span class="arrow arrow-black"></span>
  WHO WE ARE
</button>

How to make arrow transition on button:hover instead of span:hover?

1 Answers1