Javascript 当您单击此圆形按钮时，会出现一个框填充，我如何删除它？

当您单击此圆形按钮时，会出现一个框填充。如何删除它

该按钮的目的是向按钮添加一个“显示无”，但在单击过程中，会出现奇怪的填充，您知道如何阻止该表单发生吗

const-boton=document.getElementById（'btnEmpezar'）
const amarillo=document.getElementById（'do'）
boton.addEventListener（'单击'，（事件）=>console.log（事件））
函数hideButton（）{
boton.classList.add（'hide'）
}

正文{
保证金：0；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.游戏板{
边框：2件纯黑；
宽度：300px；
高度：260px；
显示器：flex；
柔性包装：包装；
背景色：黑色；
边界半径：5%；
位置：相对位置；
}
波伦先生{
位置：绝对位置；
边框：3倍纯黑；
边界半径：50%；
背景色：蓝紫色；
宽度：75px；
高度：75px；
顶部：计算值（0%-50px）；
左：计算（-20%-200px）；
}
.盒子{
框大小：边框框；
身高：50%；
宽度：50%；
边框：1px纯黑；
显示器：flex；
保证金：0；
边界半径：5%；
}
乌诺先生{
背景色：rgba（0,0,255,0.767）；
位置：相对位置；
}
.dos{
背景色：rgb（49、122、55）；
}
特雷斯先生{
背景色：rgb（213、224、46）；
位置：相对位置；
}
库托先生{
背景色：rgb（194,13,13）；
}
佩塔多先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
背景色：rgb（252255 55）；
显示器：flex；
自对准：柔性端；
边界左上半径：60%；
边框右下半径：50%；
}
.petado.light{
背景色：rgb（252253201）；
}
佩塔多先生，深色{
背景色：rgb（19519718）；
}
佩顿先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
显示器：flex；
边界左下半径：50%；
边界右上角半径：60%；
页边距底部：0；
左边距：0；
背景色：rgb（255,0,0）；
位置：绝对位置；
底部：0；
右：0；
}
佩顿·莱特先生{
背景色：rgb（255、129、129）；
}
佩顿先生{
背景色：rgb（177,0,0）；
}
佩塔特先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
显示器：flex；
位置：绝对位置；
右：0；
背景色：rgb（79255,88）；
边框右下半径：60%；
边界左上半径：50%；
}
佩塔特·莱特先生{
背景色：rgb（198253201）；
}
佩塔特先生{
背景色：rgb（67204,74）；
}
佩塔库阿先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
显示器：flex；
背景颜色：蓝色；
边界左下半径：60%；
边界右上角半径：50%；
}
.petado.light{
背景色：rgb（138138255）；
}
佩塔多先生，深色{
背景色：rgb（0，0，211）；
}
波伦先生{
位置：绝对位置；
边框：10px纯黑；
边界半径：50%；
背景色：rgb（255、255、255）；
宽度：45px；
高度：45px；
顶部：calc（50%-33px）；
左：计算（50%-33px）；
}
波伦·莱特先生{
背景色：rgb（133、127、127）
}
波伦·达克先生{
背景色：rgb（207205205）；
}
波顿先生{
位置：绝对位置；
边框：5px实心rgb（255、255、255）；
颜色：aliceblue；
边界半径：50%；
背景色：rgb（27,26,26）；
宽度：60px；
高度：60px；
顶部：calc（50%-31px）；
左：计算（50%-30px）；
z指数：1；
字体大小：10px；
溢出：隐藏；
文本对齐：右对齐；
}
波顿{
显示：无；
}

文件
恩佩查！

只需添加大纲：0即可防止它

.boton:focus{
  outline:0;
}

但我认为你们应该添加一些其他的东西，以确保当用户点击它，并看到它的工作，我添加悬停状态，让用户看到这是可点击的

.boton:hover{
  border: 5px solid rgb(200, 200, 200);
}

文件
身体{
保证金：0；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.游戏板{
边框：2件纯黑；
宽度：300px；
高度：260px；
显示器：flex；
柔性包装：包装；
背景色：黑色；
边界半径：5%；
位置：相对位置；
}
波伦先生{
位置：绝对位置；
边框：3倍纯黑；
边界半径：50%；
背景色：蓝紫色；
宽度：75px；
高度：75px；
顶部：计算值（0%-50px）；
左：计算（-20%-200px）；
}
.盒子{
框大小：边框框；
身高：50%；
宽度：50%；
边框：1px纯黑；
显示器：flex；
保证金：0；
边界半径：5%；
}
乌诺先生{
背景色：rgba（0,0,255,0.767）；
位置：相对位置；
}
.dos{
背景色：rgb（49、122、55）；
}
特雷斯先生{
背景色：rgb（213、224、46）；
位置：相对位置；
}
库托先生{
背景色：rgb（194,13,13）；
}
佩塔多先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
背景色：rgb（252255 55）；
显示器：flex；
自对准：柔性端；
边界左上半径：60%；
边框右下半径：50%；
}
.petado.light{
背景色：rgb（252253201）；
}
佩塔多先生，深色{
背景色：rgb（19519718）；
}
佩顿先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
显示器：flex；
边界左下半径：50%；
边界右上角半径：60%；
页边距底部：0；
左边距：0；
背景色：rgb（255,0,0）；
位置：绝对位置；
底部：0；
右：0；
}
佩顿·莱特先生{
背景色：rgb（255、129、129）；
}
佩顿先生{
背景色：rgb（177,0,0）；
}
佩塔特先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
显示器：flex；
位置：绝对位置；
右：0；
背景色：rgb（79255,88）；
边框右下半径：60%；
边界左上半径：50%；
}
佩塔特·莱特先生{
背景色：rgb（198253201）；
}
佩塔特先生{
背景色：rgb（67204,74）；
}
佩塔库阿先生{
宽度：130px；
高度：100px；
边框：3倍纯黑；
显示器：flex；
背景颜色：蓝色；
边界左下半径：60%；
边界右上角半径：50%；
}
.petado.light{
button:focus {
    outline: none;
}