按钮缺口半圆的实现

最新推荐文章于 2023-09-28 16:10:39 发布

公有云私有云

最新推荐文章于 2023-09-28 16:10:39 发布

阅读量807

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/84261737

版权

利用浮动配合伪元素来实现，代码如下

<!DOCTYPE">
<html>
 <head>
  <title> New Document </title>
  <meta charset="UTF-8">
  <meta name="hsw">
  <style>
	#btn{
		border: 0;
		background-color: transparent;
		outline: none;
		/*去除button默认样式*/
		display: block;
		width: 100px;
		height: 40px;
		background-color: black;
		text-align: center;
		line-height:36px;
		position: relative;
		color: #FFF;
		font-size: 1.6em;
		margin: 0 auto;
	}
	#btn::before{
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background: #fff;
		position: absolute;
		display: block;
		left: 88px;
		top: 10px;
	}
  </style>
 </head>

 <body>
   <button id="btn">button</button>
 </body>
</html>