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

随机推荐

微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
视觉SLAM中的深度估计问题
一.研究背景视觉SLAM需要获取世界坐标系中点的深度. 世界坐标系到像素坐标系的转换为(深度即Z): 深度的获取一共分两种方式: a)主动式 RGB-D相机按照原理又分为结构光测距.ToF相机 To ...
python-编程从入门到实践
python-编程从入门到实践 1.python文件后缀名: .py 是Python的源码文件,由Python.exe解释. .pyc 是Python的编译文件.pyc 文件往往代替 py 文件发布: ...
近中期3D编程研究目标
近几年一直在用业余时间研究3D编程,研究的中期目标是建立一个实用的开源3D编程框架.3D编程技术最直接的应用是开发游戏,所以3D编程框架也就是3D游戏开发框架.在我看来,游戏是否好玩的关键是能否为玩家 ...
object-fix/object-position
今日浏览某大神的一篇博文时发现如下写法: .container > div > img { width: 100%; height: 100%; object-fit: cover; } ...
使用Firebug或chrome-devToolBar深入学习javascript语言核心
使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事.这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和 ...
基于Docker Compose构建的MySQL MHA集群
Docker MySQL MHA 基于Docker 1.13.1之上构建的MySQL MHA Docker Compose Project 可快速启动GTID模式下的MasterHA集群, 主用于My ...
linux 性能分析命令及其解释
很多时候,我们需要对linux上运行的环境大体有一个了解,那么久需要大体知道当前系统的相关资源的使用情况,那么可以用一些linux提供的丰富的命令来查看性能分析 vmstat 虚拟内存统计用法 U ...
“Hello World!“”团队第五周召开的第二次会议
今天是我们团队“Hello World!”团队第五周召开的第二次会议.也祝大家双十一快乐~~博客内容: 一.会议时间二.会议地点三.会议成员四.会议内容五.todo list 六.会议照片七 ...
Java中的Object类的toString()方法，equals()方法
Object类是所有类的父类,若没有明确使用extends关键字明确表示该类继承哪个类,那么它就默认继承Object类,也就可以使用Object中的方法: 1.toString 如果输出一个对象的时候 ...

CSS3制作3D水晶糖果按钮

参考文献

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

随机推荐

热门专题