圆圈内加号css

本文介绍如何使用CSS绘制一个带有加号(+)的圆形按钮。通过设置固定定位、宽高、圆角、渐变背景,并利用伪元素::before和::after生成水平和垂直的线条,组成加号图标。提供了完整的HTML和CSS代码示例。

作者:zhuge··预计阅读 3 分钟·701 阅读·0 评论
圆圈内加号css

<text class="addbutton"></text>

.addbutton {
		position: fixed;
		right: 50px;
		bottom: 60px;
		width: 50px;
		height: 50px;
		color: white;

		font-size: 35px;
		display: block;
		border-radius: 50%;
		/* border: 2px solid black; */
		line-height: 40px;
		text-align: center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: -webkit-radial-gradient(circle, #FE4365, #FC9D9A);


	}

	.addbutton::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 20px;
		margin-left: -10px;
		margin-top: -1px;
		border-top: 2px solid;
	}

	.addbutton::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 20px;
		margin-left: -1px;
		margin-top: -10px;
		border-left: 2px solid;
	}

相关文章

评论

加载中...