Даниил Попов

<div class="wrapper">
  
  <div class="button">
    <div class="button__circle">
      <div class="button__circle-shadow"></div>
    </div>
    <div class="button__body">Button</div>
  </div>
  
</div>

$circle-size: 50px;
$transition: 0.3s;
$base-shift: translateX(-$circle-size * 0.25);
$hover-shift: translateX(-$circle-size * 0.75);
$circle-color: #F79854;
$button-color: linear-gradient(90deg, #427C33 0%, #6EBC5A 100%);
$blend-color: mix(#F79854, #427C33);

.wrapper {
  width: 500px;
  height: 500px;
  
  display: flex;
  align-content: center;
  justify-content: center;
}

.button {
  $block: &;
  height: $circle-size;
  display: flex;
  cursor: pointer;
  
  &__circle,
  &__circle-shadow {
    height: $circle-size;
    width: $circle-size;
    border-radius: 50%;
  }
  
  &__circle {
    position: relative;
    z-index: 2;
    background: $circle-color;
    overflow: hidden;
  }
  
  &__circle-shadow {
    position: absolute;
    left: 100%;
    background: $blend-color;

    transition: $transition;
    transform: $base-shift;
    
    #{$block}:hover & {
      transform: $hover-shift;
    }
  }
  
  &__body {
    height: $circle-size;
    width: $circle-size * 6;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: white;
    
    background: $button-color;
    border-radius: $circle-size;
    
    transition: $transition;
    transform: $base-shift;
    
    #{$block}:hover & {
      transform: $hover-shift;
    }
  }
}