How do I remove this graphical error for this button?

I am new to web development and I have a bug that I cannot seem to fix. Basically, I have a button that highlights when its hovered and it works but there is a small outline of the original color when hovered. I'm pretty sure this is not because of an outline or a border. The bug is displayed in the picture provided. Here is the code:

body {
    background-color: #2d2f31;
}

.start{
    width: 200px;
    height: 75px;
    border: none;
    color:black;
    background-color: beige;
    border-radius: 50px;
    box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
    font-size: 15px;
    outline: 0;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

.start:hover{
    box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
    color: white;
}

<div class=buttondiv>
        <button onclick="coming('maintext', '#F0F');" class='start' >button</button>
 </div>