css - 如何使用css制作带有狗骨轮廓的按钮?
问题描述
我找了这个,但找不到。我正在制作一个宠物护理网站,我想制作一些骨头形状的按钮,同时仍然像普通按钮一样工作(悬停功能)。除了圆形或矩形按钮,还有什么方法可以使轮廓变成骨头的形状?
谢谢!
解决方案
如果您不想使用图像,这里有一个仅使用 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>
推荐阅读
- google-apps-script - 如何将一个谷歌表复制到另一个谷歌表
- c - Linux 内核中的 nr_cpu_ids 与 NR_CPUS
- javascript - 如何将特定链接添加到搜索关键字
- codenameone - 从代号一的存储中保存和加载图像
- python - 未知数量的用户输入。输入为 .xlsx 文件
- android-studio - 在 Android Studio 中使用导航框架时,如何知道保留的类名或关键字?
- php - 从 Symfony 中的控制器返回 Json 响应
- codenameone - 代号一 InputStream 和 OutputStream
- c++ - 在“for循环”中使用gotoxy定位
- mysql - 在 WITH RECURSIVE 查询 MySQL 中添加到变量