纯CSS实现糖果按钮

最新推荐文章于 2025-07-10 13:34:33 发布

原创

最新推荐文章于 2025-07-10 13:34:33 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#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