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

随机推荐

python基础数据类型补充
python_day_7 一. 今日主要内容: 1. 补充基础数据类型的相关知识点 str. join() 把列表变成字符串列表不能再循环的时候删除. 因为索引会跟着改变字典也不能直接循环删除.把 ...
jmeter执行顺序及作用域规则
1.执行顺序配置元件前置处理器定时器采样器后置处理器断言监听器备注: 服务器响应为空的话后三个不执行作用域内存在采样器时定时器.断言.前置/后置处理器才执行逻辑控制器和采样器按照在 ...
Django——多网页网站及网页互联
在helloapp文件夹下添加名为templates的文件夹(此文件夹名称是固定的),并在其下添加html文件,文件内容根据自己网页想呈现的内容而定在views文件内添加新的函数在urls文件内添 ...
【转】: 塞尔达组在GDC2017演讲的文字翻译：创新的勇气
大家好,我是藤林秀麿,以导演的身份参与<荒野之息>的制作,感谢大家的出席.我曾经作为设计者和导演制作了诸多塞尔达游戏(大地与时空之章.缩小帽.四支剑.幻影沙漏.天空之剑),回首望去,我已经 ...
Python3实现机器学习经典算法（一）KNN
一.KNN概述 K-(最)近邻算法KNN(k-Nearest Neighbor)是数据挖掘分类技术中最简单的方法之一.它具有精度高.对异常值不敏感的优点,适合用来处理离散的数值型数据,但是它具有非常 ...
java面向对象的冒泡排序，选择排序和插入排序的比较
这三种排序有俩个过程: 1.比较俩个数据. 2.交换俩个数据或复制其中一项. 这三种排序的时间级别冒泡排序:比较 (N-1)+(N-2)+...+2+1 = N*(N-1)/2=N2/2 交换 0 ...
4. 基本socket函数
一.创建socket /* 创建一个socket */ int socket(int family, int type, int protocol); /* 参数说明 */ // domain:使用哪 ...
Python：集合操作总结
集合是一组无序排列的不重复元素集 [注]:集合的最大作用是对一个序列进行去重操作一.集合的分类在Python中集合分为两类,为可变集合(set)和不可变集合(frozenset).对于可变集合(s ...
Java JVM多线程
zabbix简介
(一)监控系统初探前言: 对于监控系统而言,首先必须搞清楚需要监控什么? (1)硬件设备和软件设备:服务器,路由器,交换机,I/O存储系统,操作系统,网络,各种应用程序 (2)各种指标:数据库宕机 ...

CSS3制作3D水晶糖果按钮

参考文献

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

随机推荐

热门专题