我找过这个,但是找不到。我正在制作一个宠物护理网站,我想做一些骨骼形状的按钮,同时仍然像一个正常的按钮(悬停功能)。除了圆形或长方形的按钮外,有没有办法把轮廓做成骨骼的形状?
谢谢!
发布于 2018-05-29 06:41:38
如果您不想使用图像,这里有一个仅使用HTML和CSS制作的示例。
.bone{
margin: 20px;
position: relative;
width: 150px;
height: 60px;
cursor: pointer;
background: transparent;
border: none;
}
.c1, .c2, .c3, .c4{
background:#fff;
height: 30px;
width: 30px;
border: 1px solid #000;
border-radius: 50%;
position:absolute;
}
.c1{
left: 0;
top: 0;
}
.c2{
right: 0;
top: 0;
}
.c3{
left: 0;
bottom: 0;
}
.c4{
bottom: 0;
right: 0;
}
.b1 {
background:#fff;
height: 30px;
width: 120px;
position:absolute;
left: 15px;
top: 15px;
}
.b2 {
position: absolute;
left: 15px;
top: 0;
width: 90px;
height: 30px;
line-height: 30px;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
}
<button class="bone">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="b1">
<div class="b2">
Button Text
</div>
</div>
</button>
https://stackoverflow.com/questions/50573597
复制相似问题