CSS button with icon and hover transition

Issue

I am trying to create a transition where the black background of the arrow on the right just grow a little to the left:

.css-button {
  width: 60%;
  font-size: 16px;
  border-radius: 5px;
  border: solid 3px #000000;
  cursor: pointer;
  position: relative;
  background: white;
  display: flex;
  justify-content: space-between;
  /* Spread items to each end of the button */
  align-items: center;
  padding: 0;
}

.css-button-text {
  padding-left: 10px;
}

.css-button:hover {
  background: red;
}

.css-button-icon {
  position: relative;
  border-left: 1px solid #ffffff29;
  padding: 10px 12px;
  background: #000000;
  color: #fff;
}

.css-button:hover .css-button-icon {
  color: #ff0000;
}

<button class="css-button">
  <span class="css-button-text">BUTTON</span>
  <span class="css-button-icon">></span>
</button>

I tried putting width: 120%; under .css-button:hover .css-button-icon and it was just expanding very weirdly.

I want it to work like so:

I have been struggling for a couple of hours trying to figure this out, any help would be appreciated. Thank you very much.

Solution

.css-button {  
        width: 60%;
        font-size: 16px;
        border-radius: 5px;
        border: solid 3px #000000;
        cursor: pointer;
        position: relative;
        background: white;
        display: flex;
        justify-content: space-between;
        /* Spread items to each end of the button */
        align-items: center;
        padding: 0;
    }

    .css-button-text {
        padding-left: 10px;
    }

    .css-button-icon {
        position: relative;
        border-left: 1px solid #ffffff29;
        padding: 10px 12px;
        background: #000000;
        color: #fff;
        transition: all 0.3s ease;
        transform-origin: right; // changes
    }

    .css-button:hover .css-button-icon {
        color: #ff0000;
        transform: scaleX(1.3); //changes
    }

    .css-button:hover {
        background: red;
    }

<button class="css-button">
   <span class="css-button-text">BUTTON</span>
   <span class="css-button-icon">></span>
</button>

Answered By - Artsiom