為展示效果，這里只做了兩個(gè)很簡(jiǎn)單的按鈕，玩兒法還有很多，就看你的腦洞有多大了 ??

糖果按鈕

以上展示效果用的是圖片，如果簡(jiǎn)書的 markdown 編輯器支持 html 語法，那我肯定就用 html 代碼來展示這個(gè)效果了，奈何......

基本思路：

1. 使用圓角邊框?qū)傩詠碓O(shè)置按鈕的形狀；
2. 設(shè)置某一條邊框的樣式來模擬立面；
3. 邊框顏色、背景色、文字顏色應(yīng)該用同一色系，為了好看；
4. 背景圖片使用漸變填充，增加立體感；
5. 內(nèi)部投影，增強(qiáng)立體感；
6. 文字投影，更加增強(qiáng)立體感。好像有點(diǎn)廢話了……??

下面是效果圖采用的代碼：

<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 揭秘》這本書，發(fā)現(xiàn)了很多好玩的，如果你也想盡量擯棄位圖的方式來裝飾你的頁面，不妨看一看這本書。我不是打廣告，這本書也不需要我來打廣告??。

當(dāng)然，如果想要用純代碼做出絢麗的效果，估計(jì)還是得需要一點(diǎn)點(diǎn)美術(shù)功底吧??