本人仿照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

CSS3制作3D水晶糖果按钮的更多相关文章

BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
CSS3制作3D旋转视频展示区
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
css3制作一个漂亮的按钮
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69
css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
用CSS3制作尖角标签按钮样式
如图的效果.标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈. 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片那你会不会在想这个效果的html结构很复杂呢——答案是最简单的 ...
CSS3制作的一款按钮特效
/*.btn { width:230px; height:70px; font-size:70px; font-weight:bold; overflow:hidden; font: "He ...
CSS3制作美丽的3D表单
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

随机推荐

基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
二、Django快速安装
一.安装Python 作为一个Python Web框架,Django依赖Python.从Django适用于哪些版本的Python可以获取更多信息.较新版本的Python内置一个轻量级的数据库SQLit ...
NO.06--聊一聊“币”吧！
近期博主更新的频率明显慢来 ,一来是最近的工作比较忙碌,几个项目几乎同时要上线.二来是在思考是不是把我平时生活中的一些事情写进来博客,不只是分享分享技术. 趁着区块链.比特币火爆,博主也算是略有涉猎, ...
Smokeping配置
参考文档: 官网:http://oss.oetiker.ch/smokeping/ 参考:http://jaminzhang.github.io/monitoring/smokeping-deploy ...
clone中的浅复制和深复制
clone:用于两个对象有相同的内容时,进行复制操作. 提示:Java中要想自定义类的对象可以被复制,自定义类就必须实现Cloneable中的clone()方法. 浅复制:另一个对象用clone()方 ...
性能度量RMSE
回归问题的典型性能度量是均方根误差(RMSE:Root Mean Square Error).如下公式. m为是你计算RMSE的数据集中instance的数量. x(i)是第i个实例的特征值向量 ,y ...
java读取excel或者csv时日期格式数据处理
背景:最近写一个通过excel批量导入数据的功能,里面含有时间,但是java读取之后把时间转为了距离1990年1月1号的天数,比如excel中时间为2018/9/16 18:30,java读取之后变成 ...
Qt 编程指南
Qt 编程指南持续关注一本正在编写的Qt编程指南,期待作者早日完成创作.
互评Alpha版本——杨老师粉丝群——Pinball
一．基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题 (1)N(Need,需求) 成语学习对除汉语言专业外的大学生的需求并不是很高,初中生和高中生因为在升学时需要参加语文 ...
"Hello World"团队召开的第三周第七次会议
今天是我们团队“Hello World!”团队召开的第三周的第七次会议.博客内容: 一.会议时间二.会议地点三.会议成员四.会议内容五.Todo List 六.会议照片七.燃尽图一.会议时 ...

CSS3制作3D水晶糖果按钮

参考文献

CSS3制作3D水晶糖果按钮的更多相关文章

随机推荐

热门专题