我想知道是否有办法改变引导按钮的形状,得到这样的东西:
任何提示?
答案 0 :(得分:2)
除非您使用图像和:after
伪元素,否则您不会在按钮的尖端上获得圆形边缘,但您可以使用css三角形来接近它。这是我制作的简短演示,它使用了一些颜色技巧来接近这种效果:
<强> CSS 强>
button.btn {
position:relative;
}
button.btn:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-right: 14px solid #e2e2e2;
position: absolute;
top: 50%;
margin-top: -14px;
right: 98%;
z-index: 2;
}
button.btn:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-right: 14px solid #A0A0A0;
position: absolute;
top: 50%;
margin-top: -14px;
right: 97%;
z-index: 1;
}
.btn-primary {
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(left, #e2e2e2 0%, #d1d1d1 47%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e2e2e2), color-stop(47%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* IE10+ */
background: linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* W3C */
text-shadow: 0 -1px 0 #fff;
color:#777;
border: 1px solid #A0A0A0;
}
我没有包含:hover
和:active
状态样式,因此您可以使用Colorzilla渐变生成器来混合使用某些颜色。
以下是按钮外观的演示: