您的位置：首页 > Web前端 > CSS

CSS3制作3D水晶糖果按钮

2017-01-09 13:17 706 查看

本人仿照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过渡效果。

如果疑问，请留言讨论。

参考文献

[1]BonBon Candy Button

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航