选择带有border-radius的div后删除框

Question

我有一个带有span元素的div，它将具有一个重定向功能。 div具有border-radius属性。所有的工作和用户界面都很好看。但是当选择元素时，我会看到div周围的边框。

由于它在重定向之前只出现了一分钟，我无法跟踪它可能出现的CSS问题。

这是我的代码：

HTML：           按钮文字     

CSS：

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
}

这是选择看起来像div的方式，然后才移到不同的页面：

对此的任何帮助将不胜感激。

Answer 1

设置菜单按钮的大纲属性。像这样

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
    outline:none;
}

Answer 2

确保将菜单按钮类的outline设置为none。即，outline: none;。

由于button元素的某些默认值，会发生这种情况。例如，在Google Chrome浏览器上，outline是标准的蓝色边框，用于突出显示您当前所在的位置。

因此，设置outline: none;会在您点击border元素时删除任何button。

这也适用于input元素，以供将来参考。

Answer 3

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
    border:none;
}