Html 蓝色突出显示在按钮周围_Html_Css

Html 蓝色突出显示在按钮周围

html css

Html 蓝色突出显示在按钮周围,html,css,Html,Css,我用CSS3做我的按钮。我注意到，每当我点击任何一个按钮时，按钮周围就会出现一个矩形的蓝色高亮显示。我不知道有没有办法把它脱下来。这是我的密码： .navbar-custom { background-color:#000000; color:#ffffff; border-radius:0; height:100px; } .btn { box-sizing: border-box; appear

我用CSS3做我的按钮。我注意到，每当我点击任何一个按钮时，按钮周围就会出现一个矩形的蓝色高亮显示。我不知道有没有办法把它脱下来。这是我的密码：

    .navbar-custom {
        background-color:#000000;
        color:#ffffff;
        border-radius:0;
        height:100px;
        }

.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.sixth {
  border-radius: 3em;
  border-color: #ec6800;
  color: #FFF;
  background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
  background-position: 0 0;
  background-size: 200%;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}

</style>

</head>

<body>

     <nav class="navbar navbar-custom">
        <ul class="nav navbar-nav navbar-right">
           <button class="btn sixth">SIGN UP</button>
               </ul> </nav>          
</body>

.navbar自定义{
背景色：#000000；
颜色：#ffffff；
边界半径：0；
高度：100px；
}
.btn{
框大小：边框框；
外观：无；
背景色：透明；
边框：2px实心#e74c3c；
边界半径：0.6em；
颜色：#e74c3c；
光标：指针；
显示器：flex；
自对准：居中；
字号：1rem；
字体大小：400；
线高：1；
利润率：20px；
填充物：1.2em 2.8em；
文字装饰：无；
文本对齐：居中；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
}
.btn:悬停，.btn:焦点{
颜色：#fff；
大纲：0；
}
.第六{
边界半径：3em；
边框颜色：#ec6800；
颜色：#FFF；
背景图像：线性渐变（至底部，透明50%，#2ecc71 50%）；
背景位置：0；
背景大小：200%；
过渡：背景150ms缓进缓出，颜色150ms缓进缓出；
}

注册

按钮已具有属性

大纲：0

应该注意这一点，必须有一些CSS覆盖此属性，您可以使用

大纲：无

或

大纲：0

，两者基本上做相同的事情，请参阅，因此将属性修改为

之前：

.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.btn:focus {
  color: #fff;
  outline: 0 !important;
}

之后：

.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.btn:focus {
  color: #fff;
  outline: 0 !important;
}

.navbar自定义{
背景色：#000000；
颜色：#ffffff；
边界半径：0；
高度：100px；
}
.btn{
框大小：边框框；
外观：无；
背景色：透明；
边框：2px实心#e74c3c；
边界半径：0.6em；
颜色：#e74c3c；
光标：指针；
显示器：flex；
自对准：居中；
字号：1rem；
字体大小：400；
线高：1；
利润率：20px；
填充物：1.2em 2.8em；
文字装饰：无；
文本对齐：居中；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
}
.btn:悬停，
.btn:焦点{
颜色：#fff；
大纲：无！重要；
}
.第六{
边界半径：3em；
边框颜色：#ec6800；
颜色：#FFF；
背景图像：线性渐变（至底部，透明50%，#2ecc71 50%）；
背景位置：0；
背景大小：200%；
过渡：背景150ms缓进缓出，颜色150ms缓进缓出；
}



注册

盒子阴影在某些情况下有帮助

好了，谢谢你的帮助，伙计