:focus remains even when clicking anywhere else on the screen

Is there any way for me to make it so that when I click anywhere on the screen, the :focus of the css doesn't revert to the normal style without the :focus? and it only changes style if I click on another button.

HTML:

div class="grid grid-cols-2 gap-4 text-md lg:text-lg text-white mt-10 ">
            <div class="col-span-1">
                <button 
                    id="buttonFocus"
                    bind:this={initialFocus}
                    class="hbtn hb-border-bottom-br4 p-2 w-full mb-5 outline-none"
                    on:click={() => {video = 'video1'}}>
                    Como usar a plataforma
                </button>
            </div>
            <div class="col-span-1" >
                <button 
                    class="hbtn hb-border-bottom-br4 p-2 w-full mb-5 outline-none"
                    on:click={() => video = 'video2'}>
                    Como adquirir a licença
                    <br>
                </button>
            </div>
        </div>

CSS:

    .hb-border-bottom-br4 {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 10px 22px;
} 


.hb-border-bottom-br4::after {
    display:block;
    content: ''; 
    border-bottom-width: 2px;
    border-color: #535C61;
    transform: scaleX(1);  
    transition: transform 300ms ease-in-out;
} 


.hb-border-bottom-br4:focus::after{
    transform: scaleX(0.5); 
    border-color: #438C7B;
}