小编Ars*_*ech的帖子

带圆角的CSS六角形按钮

我可以使用CSS创建相同的按钮.圆角是重要角落的主要原因.带圆角的三角形按钮,请参阅下面的代码和图片

图片

.lngbtn {
	position: relative;
	width: 150px;
	height: 50px;
	margin: 50px;
	color: #FFFFFF;
	background-color: #f4d046;
	text-align: center;
	line-height: 48px;
    padding: 16px;
	font-weight: bold;
}



.lngbtn:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:25px solid transparent;
    border-right:30px solid #f4d046;
    border-bottom:25px solid transparent;
}

.lngbtn:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:25px solid transparent;
    border-left:30px solid #f4d046;
    border-bottom:25px solid transparent;
}
Run Code Online (Sandbox Code Playgroud)
<a href="#" class="lngbtn">Get to know us</a>
Run Code Online (Sandbox Code Playgroud)

css button css3 css-shapes

4
推荐指数
2
解决办法
1439
查看次数

标签 统计

button ×1

css ×1

css-shapes ×1

css3 ×1