为展示效果，这里只做了两个很简单的按钮，玩儿法还有很多，就看你的脑洞有多大了 😄
糖果按钮
以上展示效果用的是图片，如果简书的 markdown 编辑器支持 html 语法，那我肯定就用 html 代码来展示这个效果了，奈何......
基本思路：
- 使用圆角边框属性来设置按钮的形状；
- 设置某一条边框的样式来模拟立面；
- 边框颜色、背景色、文字颜色应该用同一色系，为了好看；
- 背景图片使用渐变填充，增加立体感；
- 内部投影，增强立体感；
- 文字投影，更加增强立体感。好像有点废话了……😂
下面是效果图采用的代码：
<button style="btn1">B</button>
<button class="btn2">Button</button>
<style>
button {
padding: 5px 10px;
border: none;
text-shadow: 0 1px 0 white;
box-shadow: 0 -2px 2px 2px rgb(0 0 0 / 10%) inset;
box-sizing: border-box;
}
.btn1 {
border-radius: 5px 5px 50%;
border-bottom: 3px solid #9e3474;
background: #ffc4e5;
background-image: linear-gradient(#ffffffab, transparent);
color: #ca449a;
}
.btn2 {
border-radius: 50% 10px / 100% 10px;
border-bottom: 3px solid #a97314;
background: #efc272;
background-image: linear-gradient(180deg, #ffffffab, transparent);
color: #966817;
}
</style>
最近在看《css 揭秘》这本书，发现了很多好玩的，如果你也想尽量摈弃位图的方式来装饰你的页面，不妨看一看这本书。我不是打广告，这本书也不需要我来打广告😂。
当然，如果想要用纯代码做出绚丽的效果，估计还是得需要一点点美术功底吧😄
