为什么我的按钮点击的时候边缘会有一个框框，我发一下我的代码，麻烦大佬帮我看一下，谢谢
css部分的
.btn1 button{
width: 80px;
margin: 4px;
border-radius: 5px;
border: 0px ;
height: 35px;
font-size: 13px;
text-align: center;
color: #000000;
}
.btn2 button{
width: 80px;
margin: 4px;
border-radius: 5px;
border: 0px ;
height: 35px;
font-size: 13px;
text-align: center;
color: #000000;
}
.btn3 button{
width: 80px;
margin: 4px;
border-radius: 5px;
border: 0px ;
height: 35px;
font-size: 13px;
text-align: center;
color: #000000;
}
.btn{
/* width: 100%; */
position:fixed;
top: 70px;
}
html部分
<div class="btn">
<div class="btn1">
<button type="button" style="background-color: #00a3da;color: #FFFFFF;">国家</button>
<button type="button" class="onlic">美国</button>
<button type="button" class="onlic">日本</button>
<button type="button" class="onlic">英国</button>
<button type="button" class="onlic">法国</button>
<button type="button" class="onlic">其他</button>
</div>
<div class="btn2">
<button type="button" style="background-color: #00a3da;color: #FFFFFF;">游学类型</button>
<button type="button" class="onlic">走读</button>
<button type="button" class="onlic">交换</button>
<button type="button" class="onlic">宿舍</button>
<button type="button" class="onlic">工读</button>
<button type="button" class="onlic">寄宿</button>
</div>
<div class="btn3">
<button type="button" style="background-color: #00a3da;color: #FFFFFF;">年纪</button>
<button type="button" class="onlic">高中</button>
<button type="button" class="onlic">预科</button>
<button type="button" class="onlic">本科</button>
<button type="button" class="onlic">硕士</button>
<button type="button" class="onlic">博士</button>
</div>
</div>
jQuery部分
$(document).ready(function(){
$(".btn1 button").click(function() {
$(".btn1 button").removeClass("red");
$(this).addClass("red");
})
})
$(document).ready(function(){
$(".btn2 button").click(function() {
$(".btn2 button").removeClass("red");
$(this).addClass("red");
})
})
$(document).ready(function(){
$(".btn3 button").click(function() {
$(".btn3 button").removeClass("red");
$(this).addClass("red");
})
})