CSS3制作3D水晶糖果按钮
本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon（Candy）Button实现了其棒棒糖果按钮，如下图所示：
在线演示地址见here。
使用完全使用CSS实现，无需JS。源码如下：
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
/*按钮未被访问的样式*/
.btn{
display:inline-block;
position:relative;
margin:5px 5px;
border-radius:10px; /*CSS3标准属性*/
-webkit-border-radius:10px; /*for Google Chrome、Apple Safari*/
-moz-border-radius:10px; /*for Mozilla Firefox*/
font:bold 22px/100% "微软雅黑";
color: hsl(39, 100%, 30%);
background-color: hsl(39, 100%, 50%);
padding: 0.5em 0.8em 0.4em 0.8em;
box-shadow:rgba(255, 254, 255, 0.6) 0 0.3em 0.3em inset,hsl(39,100%,40%) 0 0.1em 3px,hsl(39,100%,30%) 0 0.3em 1px,rgba(0,0,0, 0.2) 0 0.4em 3px;
-webkit-box-shadow:rgba(255, 254, 255, 0.6) 0 0.3em 0.3em inset,hsl(39,100%,40%) 0 0.1em 3px,hsl(39,100%,30%) 0 0.3em 1px,rgba(0,0,0, 0.2) 0 0.4em 3px;
-moz-box-shadow:rgba(255, 254, 255, 0.6) 0 0.3em 0.3em inset,hsl(39,100%,40%) 0 0.1em 3px,hsl(39,100%,30%) 0 0.3em 1px,rgba(0,0,0, 0.2) 0 0.4em 3px;
background-image:-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from(rgba(255, 255, 255,0) ),to( rgba(255, 255, 255, 0.5) )),url(img/noise.png);
border-bottom: 1px solid rgba(255,255,255,0.3);
cursor:pointer;
text-shadow:rgba(255,255,255,.5) 0 1px 0;
transition:border-radius 0.5s ease-in-out;
-webkit-transition: -webkit-border-radius 0.5s ease-in-out;
-moz-transition: -moz-border-radius 0.5s ease-in-out;
}
/*鼠标指针悬停在按钮上的样式*/
.btn:hover{
background-image:-webkit-gradient(radial,50% 0,100,50% 0,0,from(rgba(255,255,255,0)),to(rgba(255,255,255,0.7))),url(img/noise.png);
border-radius:10px 10px 2em 2em/10px 10px 2em 2em;
}
/*按钮正在被点击的样式*/
.btn:active{
background-image:-webkit-gradient(radial,50% 0,100,50% 0,0,from(rgba(255,255,255,0)),to(rgba(255,255,255,0.3))),url(img/noise.png);
padding: 0.5em 0.8em;
box-shadow:rgba(0,0,0,0.6) 0 0.1em 1px,rgba(255, 254, 255, 0.6) 0 0.3em 0.3em inset;
border-bottom:none;
top:3px;
}
/*产生高光*/
.btn:after {
content: "";
position: absolute;
width: 90%;
height: 60%;
top:0;
left: 5%;
background-image:-webkit-gradient(linear,left center,right center,from(rgba(255,255,255,0.5)),color-stop(0.6,rgba(255,255,255,0)),color-stop(0.8,rgba(255,255,255,0)),to(rgba(255,255,255,0.5)));
-webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
}
</style>
</head>
<body>
<a id="btnChoujiang" class="btn">抽奖</a>
<a id="btnReset" class="btn">重置</a>
</body>
</html>解读源码注意以下几点： （1）之所以使用a标签作为按钮，而不使用button标签，是因为可以通过a的active样式为按钮设置更多的样式，增加美观度； （2）重点掌握box-shadow、border-radius、-webkit-gradient、transition的用法，文中按钮使用了四重box-shadow，按钮背景图片使用了径向渐变，高光使用了线性渐变，CSS属性变化使用了transition过渡效果。
如果疑问，请留言讨论。
参考文献
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年01月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录