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

随机推荐

VS2008 "无法找到资源编译器dll 请确保路径正确"
系统环境:windows 8.1 企业版 x64 (装有 .NET 2.0 / 3.5 / 4.0 / 4.5) 安装前确认系统已安装 .NET 2.0 / 3.5 .在安装时,最好是默认安装,并且 ...
Ubuntu设置DNS服务
有时候安装完Ubuntu系统,源换好好还是不能更新,软件也不能下, 配置好IP,ping 1.1.1.1是通的,ping 域名就不通了,这是没有DNS解析域名的结果一.Server版: 对于Ubun ...
Zookeeper-----Zookeeper概述
一:Zookeeper的概念? ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个复杂的过程.ZooKeeper通过其简单的架构和API解决了这个问题.Zoo ...
爬虫2.4-scrapy框架-图片分类下载
目录 scrapy框架-图片下载 1 传统下载方法: 2 scrapy框架的下载方法 3 分类下载完整代码 scrapy框架-图片下载 python小知识: map函数:将一个可迭代对象的每个值,依次 ...
华为云分布式缓存服务DCS与开源服务差异对比
华为云分布式缓存DCS提供单机.主备.集群等丰富的实例类型,满足用户高读写性能及快速数据访问的业务诉求.支持丰富的实例管理操作,帮助用户省去运维烦恼.用户可以聚焦于业务逻辑本身,而无需过多考虑部署.监 ...
剑指offer-数值的整数方
数值的整数方一.问题描述给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 二.算法思路按照指数Exp的情况进行讨论. Exp> ...
最大公共子串：DP
标题:最大公共子串最大公共子串长度问题就是:求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc",可以找 ...
DruidDataSource源码分析
最近公司要求基于阿里的DruidDataSource来做一个连接池监控 , 正好之前没有看过DruidDataSource的源码 , 便自己看了四个多小时写了一些自己的理解 , 给大家分享一下 , 如 ...
标准版 Eclipse (Eclipse standard 4.3.3) 添加 Tomcat 支持
步骤1:下载 Eclipse Tomcat 插件最新版:tomcatPluginV33.zip,官网下载最新版:http://www.eclipsetotale.com/tomcatPlugin.ht ...
Week4_Linux书本一二两章
第一章的学习内容就是对Linux内核有一个基本的了解,同时知道一些关于Linux的知识. 学习Linux,可以自己有一台装有Linux操作系统的机器,源代码的作用无可替代: Linux发展历程简介:L ...

CSS3制作3D水晶糖果按钮

参考文献

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

随机推荐

热门专题