bootstrap中圆形按钮的设计

最新推荐文章于 2024-05-10 03:05:44 发布

Miss_grapefruit

最新推荐文章于 2024-05-10 03:05:44 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/Miss_grapefruit/article/details/80743865

版权

html的代码

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
	<script type="text/javascript" src="dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
</head>

<body>
<button type="button" class="btn btn-info btn-circle btn-lg"><span>登录</span></button>
</body>
</html>

css样式的代码

body{margin:40px;}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 80px;
  height: 80px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 50px;
}

button span{
	font-size: 20px;
}

/*此处的样式着重解决点击时存在蓝色边框*/
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	outline: none;
	border-color:transparent;
	box-shadow:none;}