我正在为按钮使用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>
该按钮已经具有属性outline: 0;
,该属性应该考虑到这一点,必须有一些CSS覆盖此属性,您使用outline:none
或outline:0
,基本上都可以做同样的事情,请参阅此处,请参阅此处。因此将属性修改为
之前:
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
之后:
.btn:focus {
color: #fff;
outline: 0 !important;
}
.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: none !important;
}
.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;
}
<nav class="navbar navbar-custom">
<ul class="nav navbar-nav navbar-right">
<button class="btn sixth">SIGN UP</button>
</ul>
</nav>
盒子阴影在某些情况下有助于
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none !important;
}