Change SVG Icon Color on Hover Version 3

by Patrick Hladun

HTML

<div class="testimonials">
  <div class="testimonial">
    Discovering 'Brew Bliss' was a game-changer for me. Their single-origin Ethiopian blend was bold, smooth, and unforgettable. Excellent customer service and commitment to sustainability further impressed me. It's not just about buying coffee, it's a sensory experience. Don't miss out!
  </div>
  <div class="navigation">
    <button class="arrow arrow-previous"><span class="arrow-icon"></span></button>
    <button class="arrow arrow-next"><span class="arrow-icon"></span></button>
  </div>
</div>

SCSS

$arrow: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z'/%3E%3C/svg%3E";

.testimonials {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: auto;
}

.testimonial {
  padding: 34px;
  font-family: sans-serif;
  line-height: 1.4;
}

.navigation {
  display: flex;
  justify-content: space-between;
}

.arrow-icon {
  display: block;
  width: 24px;
  height: 24px;
  background: black;
  -webkit-mask: url("data:image/svg+xml, #{$arrow}") no-repeat center;
  mask: url("data:image/svg+xml, #{$arrow}") no-repeat center;
  mask-size: cover;
}

.arrow {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #F8F8F2;

  &:hover {
    background: #D5D5D5;

    .arrow-icon {
      background: #5290BF;
    }
  }
}

.arrow-next {
  transform: rotate(180deg);
}