在线演示地址见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> 如果疑问，请留言讨论。
参考文献
BonBon Candy Button
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218851.html原文链接：https://javaforall.net
