css button 圆角

背景:想调一个如下的圆按钮

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media queries</title>
</head>
<style>
.btn{
	height: 50px;
	width: 50px;
	border: none;
	border-radius: 50%;
}
</style>
<body>
<button class="btn">test</button>
</body>
</html>

正常逻辑如上,但是会发现当鼠标点击的时候,“button”后面会有个方框似的东西,给用户带来很不好的体验,如下:

解决办法:

1.直接用div等标签来做 将

<button class="btn">test</button>

改成

<div class="btn">test</div>

2.使用button标签,添加样式 outline:none;

.btn{
	height: 50px;
	width: 50px;
	border: none;
	border-radius: 50%;
	outline:none;
}


你可能感兴趣的:(css button 圆角)