Change SVG Icon Color on Hover Version 1

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="button previous">
      <svg viewBox="0 0 24 24"><path 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"/></svg>
    </button>
    <button class="button next">
    <svg viewBox="0 0 24 24"><path 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"/></svg>
    </button>
  </div>
</div>

SCSS

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

.button {
  display: flex;
  padding: 4px;
  justify-content: space-between;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #F8F8F2;
  
  svg {
    fill: #D5D5D5;
  }
  
  &:hover {
    background: #D5D5D5;
    svg {
      fill: #5290BF;
    }
  }
  
}

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