纯CSS打造漂亮糖果按钮

为展示效果，这里只做了两个很简单的按钮，玩儿法还有很多，就看你的脑洞有多大了 😄

糖果按钮

以上展示效果用的是图片，如果简书的 markdown 编辑器支持 html 语法，那我肯定就用 html 代码来展示这个效果了，奈何......

基本思路：

1. 使用圆角边框属性来设置按钮的形状；
2. 设置某一条边框的样式来模拟立面；
3. 边框颜色、背景色、文字颜色应该用同一色系，为了好看；
4. 背景图片使用渐变填充，增加立体感；
5. 内部投影，增强立体感；
6. 文字投影，更加增强立体感。好像有点废话了……😂

下面是效果图采用的代码：

<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 揭秘》这本书，发现了很多好玩的，如果你也想尽量摈弃位图的方式来装饰你的页面，不妨看一看这本书。我不是打广告，这本书也不需要我来打广告😂。

当然，如果想要用纯代码做出绚丽的效果，估计还是得需要一点点美术功底吧😄