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

如果疑问，请留言讨论。

参考文献

BonBon Candy Button

CSS3 制作 3D 水晶糖果按钮相关推荐

CSS3制作3D水晶糖果按钮
本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示: 在线演示地址见here. 使用完全使用CSS实现,无需JS.源码如下 ...
BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
运用CSS3制作3D盒子骰子
运用CSS3制作3D盒子骰子最近好像CSS3上瘾了,特喜欢找动画效果来练手(空闲时间),这不,我参照人家制作的3D盒子制作了一个骰子,参照链接: https://www.cnblogs.com/dt ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
旋转立体相册制作html,用CSS3制作3D动态旋转相册
最近做一个网站,想弄一个炫酷的效果,所以想到了用CSS3做一个图片3D旋转的效果.[实际就是做一个3D动态旋转相册,自己发挥哦] 下面直接上代码了. -------------------start- ...
css3制作一个漂亮的按钮
特点: 1.圆角边框 border-radius 2.文字有背景 text-shadow 3.按钮有阴影 box-shadow 4.文字有向上的阴影 text-shadow 5.按钮背景色有个从 ...
html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时图片爆炸开并切换到下一张图片依次循环首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...

CSS3 制作 3D 水晶糖果按钮

参考文献

CSS3 制作 3D 水晶糖果按钮相关推荐

最新文章

热门文章