纯CSS实现糖果按钮

废话不多说，直接上代码：
注：为了减少代码量，以下代码均没写兼容性写法。

<a class="button" href="#">Candy</a>

.button {
    /* text */
    text-decoration: none;
    font: 24px/1em 'Droid Sans', sans-serif;
    font-weight: bold;
    text-shadow:rgba(255,255,255,0.5) 0 1px 0;

    /* layout */
    padding: 0.5em 0.6em 0.4em 0.6em;
    margin: 0.5em;
    display: inline-block;
    position: relative;
    border-radius:  8px;

    /* effects */
    border-top:1px solid rgba(255,255,255,0.8);
    border-bottom:1px solid rgba(0,0,0,0.1);
    background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,0),rgba(255,255,255,0.7)),
                    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEQSURBVChTVVCxaoRQEPRD3uHFkFzuIEU+IBASUtgEEggErsr1/oetra2tdiKCxWttBC1EsBO7U2xUFAS9HXk5SDHM291hdvZJ8zyzPM8ZGFiW5UG8D+fz+Uf0XiDcQeh53irs+/6D+ClN0ze8hcl+dfyD7/sb4iPeJGJd1/1GUSTXdc2ktm2PsOacs3EcVayGC/HWsqzVIAxDJonBYZqmL8dxIP6k4Q1hT3gmnCD+tzrLsi2yaprGiqL4FvkeXddVJHGESjneiTfIQ3wKgkBpmka2bfuOalmqqmoHAUVQyrK8ugOo0cdhq6NpmmwYhlsMkyS5/iuOwAbUkq7raL7S5yK0CkEcx/eGYaCPbYxzzi6C1h8/IRQXUAAAAABJRU5ErkJggg=="),
                    #80c4ff;
    transition:background 0.2s ease-in-out;

    /* color */
    color: #336999;
    box-shadow: rgba(255,254,255,0.6) 0 0.3em 0.3em inset,
                rgba(255,255,255,0.15) 0 -0.1em 0.3em inset,
                #5390c6 0 0.1em 3px,
                #336999 0 0.3em 1px,
                rgba(0,0,0,0.2) 0 0.5em 5px;
}
.button:hover {
    background-color: #a8d7ff;
}
.button:active {
    background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,0),rgba(255,255,255,0)),
                    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEQSURBVChTVVCxaoRQEPRD3uHFkFzuIEU+IBASUtgEEggErsr1/oetra2tdiKCxWttBC1EsBO7U2xUFAS9HXk5SDHM291hdvZJ8zyzPM8ZGFiW5UG8D+fz+Uf0XiDcQeh53irs+/6D+ClN0ze8hcl+dfyD7/sb4iPeJGJd1/1GUSTXdc2ktm2PsOacs3EcVayGC/HWsqzVIAxDJonBYZqmL8dxIP6k4Q1hT3gmnCD+tzrLsi2yaprGiqL4FvkeXddVJHGESjneiTfIQ3wKgkBpmka2bfuOalmqqmoHAUVQyrK8ugOo0cdhq6NpmmwYhlsMkyS5/iuOwAbUkq7raL7S5yK0CkEcx/eGYaCPbYxzzi6C1h8/IRQXUAAAAABJRU5ErkJggg==")
                    #a8d7ff;
    box-shadow: rgba(255,255,255,0.6) 0 0.3em 0.3em inset,
                rgba(0,0,0,0.2) 0 -0.1em 0.3em inset, 
                rgba(0,0,0,0.4) 0 0.1em 1px, 
                rgba(0,0,0,0.2) 0 0.2em 6px; 
    transform:translateY(0.2em);
}

效果：

基于以上的样式，我们来写第二种：

<a class="button btn-2" href="#">Candy</a>

/*btn-2*/
.btn-2{
    border-top: none;
    border-radius: 0.5em/1em;
}

第三种：

<li><a class="button btn-3" href="#">An</a></li>

/*btn-3*/
.btn-3{
    font-size: 32px;
    border-top-color: rgba(255,255,255,0.5);
    border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
    text-shadow: rgba(255,255,255,0.5) 0 -1px 0, rgba(0,0,0,0.18) 0 0.18em 0.15em; 
}
.btn-3:after{
    position: absolute;
    top: 0;
    left: 6%;
    content: '';
    width: 88%;
    height: 80%;
    background-image: linear-gradient(90deg,rgba(255,255,255,0.55),rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%,rgba(255,255,255,0.5));
    border-top-color: rgba(255,255,255,0.5);
    border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
}
.btn-3:active {
    text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 0.18em 0.15em;
}

第四种：

<a class="button btn-4" href="#">A Candy</a>

/*btn-4*/
.btn-4{
    border-top: none;
    padding-right: 1.2em;
    padding-left: 1.2em;
    border-radius: 5em 1em / 5em 1em;
}
.btn-4:after{
    position: absolute;
    top: 0;
    left: 10%;
    content: '';
    width: 90%;
    height: 60%;
    background-image: linear-gradient(90deg,rgba(255,255,255,0.55),rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%,rgba(255,255,255,0.5));
    border-top-color: rgba(255,255,255,0.5);
    border-radius: 7em 1em / 5em 1em;
}

第五种：

<a class="button btn-5" href="#">An</a>

/*btn-5*/
.btn-5{
    border-top: none;
    padding-left: 0.8em;
    padding-right: 0.8em;
    border-radius: 1.8em / 1em;
}

第六种：

<a class="button btn-6" href="#">AN</a>

.btn-6{
    padding: 0.8em;
    border-radius: 0.4em 0.4em 2em 2em / 0.4em 0.4em 3em 3em;
}
.btn-6:after{
    position: absolute;
    top: 0;
    left: 5%;
    content: '';
    width: 90%;
    height: 75%;
    background-image: linear-gradient(90deg,rgba(255,255,255,0.55),rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%,rgba(255,255,255,0.5));
    border-top-color: rgba(255,255,255,0.5);
    border-radius: 0.4em 0.4em 2em 2em / 0.4em 0.4em 3em 3em;
}

第七种：

<a class="button btn-6" href="#">AN</a>

/*btn-6*/
.btn-7{
    border-top: none;
    padding: 0.6em 0.6em;
    border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
    text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 0.18em 0.15em;
}
.btn-7:after{
    position: absolute;
    top: 0;
    left: 4%;
    content: '';
    width: 90%;
    height: 75%;
    background-image: linear-gradient(90deg,rgba(255,255,255,0.55),rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%,rgba(255,255,255,0.5));
    border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
}