Html 带有图标和悬停过渡的CSS按钮

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