CSS Border Transition adds Unwanted Extra Pixels

Question

I am styling a button for my electron application (HTML, SASS). On hover, this button will add a 10px border-top and border-bottom, then adjust its height by -20 to cancel out extra border height. I have the transition working almost perfectly except for when a small border (less than 1px it seems) is added to each border(top and bottom on hover), this additional border increases the total height of the button just enough to push the downstream html in a little bump that is pretty visually annoying. In the included gif you will notice it most when the hover-off transition is finished, you should see a 1px border just disappear abruptly at the end. How can I prevent this extra few pixels of border from generating and bumping the rest of my html around? Any other way to create the same effect I am going for?

This is my second post here, the last was close to 2 years ago, so please let me know if I am missing something that I should have included, thanks for reading!

HTML:

<div class="--square e--block --btn">
    <h1>Create Backups</h1>                    
</div>

SCSS Variables:

$mainSize: 100px;
$btnBorder: 10px;

SCSS:

//-- Basic element
.e--block {
    //-- Position
    //- Flex
    display: flex;
    flex-direction: column;
    justify-content: center;
    //- Text
    text-align: center;
    //- Align
    margin: $baseSpacing;

    //-- Style
    //- BG
    background-color: $btnColorLight;
    //- Text
    color: $white;
    font-weight: 2;
    //- Border
    //border: none;
    border-radius: $borderRadius;

    
    * {
        //-- Position
        //- Flex
        vertical-align: middle;
        //- Align
        padding: {
            top: 10px;
            bottom: 10px;
        }
        margin: auto;
    }
}

.--btn {
    //-- Style
    //- Border
    border: 0px solid white;
    //- Transition
    transition: {
        property: border-width, height;
        duration: 1s;
        timing-function: ease;
    }
}
.--square {
    //-- Position
    //- Size
    height: ($mainSize * 2);
    width: ($mainSize * 2);
}
.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    height: (($mainSize * 2) - ($btnBorder * 2));
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

Answer 1

I can't explain why this problem is happening but I would guess it's because the rendering engine is bad at handling this kind of double transitions.

As a workaround you can had a box-sizing property with border-box value on your .--square and remove the height change:

.--square {
   //-- Position
   //- Size
   height: ($mainSize * 2);
   width: ($mainSize * 2);
   box-sizing: border-box;
}

.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

Answer 2

Also I think you can somewhat fasten up this bump by using custom timing-function , for example:

transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);