jquery+css3打造3D按钮特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+css3打造3D按钮特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312" />
    <title>CSS3和jQuery打造3D按钮演示效果</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
    <div id="content">
        <!--DEMO start-->

        <div id="three-d">3D</div>
        <div id="container">

            <header>
                <h1>Create 3D Buttons with CSS & jQuery</h1>
            </header>

            <section id="content">
                <article id="round">
                    <h1>Demo One</h1>
                    <a href="#" id="tutorial-toggle" class="button">Off</a>
                    <a class="dot">The tutorial mode is on!</a>
                </article><!-- end #round -->

                <article id="long">
                    <h1>Demo Two</h1>
                    <a href="#" id="long-toggle" class="button">Click to turn tutorial mode on</a>
                    <a class="dot2">The tutorial mode is on!</a>
                </article><!-- end #round -->

            </section><!-- end #content -->

            <footer>


                <!-- Main call to jQuery -->
                <script src="js/jquery.min.js"></script>
                <script>
                    $(document).ready(function () {
                        // Demo #1
                        // Find the link with an ID of 'tutorial-toggle' and listen for when it is clicked
                        $("a#tutorial-toggle").click(function () {
                            // When it get's clicked, toggle the class 'on'
                            $(this).toggleClass("on");

                            // If the class 'on' was added...
                            if ($('a#tutorial-toggle').hasClass('on')) {
                                // Then fade in all the dots
                                $(this).text('on');
                                $('a.dot').fadeIn();
                            }
                                // Otherwise, the class 'on' must have been removed, so...
                            else {
                                // Fade the dots out
                                $(this).text('off');
                                $('a.dot').fadeOut();
                            }
                            return false;
                        });

                        // Demo #2
                        $("a#long-toggle").click(function () {
                            $(this).toggleClass("on");

                            if ($('a#long-toggle').hasClass('on')) {
                                $(this).text('Click to turn tutorial mode off');
                                $('a.dot2').fadeIn();
                            }
                            else {
                                $(this).text('Click to turn tutorial mode on');
                                $('a.dot2').fadeOut();
                            }
                            return false;
                        });

                    });
                </script>
            </footer>
        </div><!-- end #container -->
        <!--DEMO end-->
    </div>
</body>
</html>

JS代码(jquery.beautyOfCode.js):

jQuery.beautyOfCode ={
	settings:{
	// should the syntax highlighter and brushes // be loaded dynamically autoLoad:true,// the base url to alex' hosted sources // http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting baseUrl:'http://alexgorbatchev.com/pub/sh/2.1.364/',// the baseurl for the hosted scripts scripts:'scripts/',// the baseurl for the hosted styles styles:'styles/',// themes from http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes theme:'Default',// the brushes that should be loaded - case sensitive! // http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes brushes:['Xml','JScript','CSharp','Plain'],// overrides for configurations and defaults // http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration config:{
}
,defaults:{
}
,// function to be called,when all scripts are loaded ready:function(){
	jQuery.beautyOfCode.beautifyAll();
}
}
,init:function(settings){
	settings = jQuery.extend({
}
,jQuery.beautyOfCode.settings,settings);
	if (!settings.config.clipboardSwf) settings.config.clipboardSwf = settings.baseUrl + settings.scripts + 'clipboard.swf';
	$(document).ready(function(){
	if (!settings.autoLoad){
	settings.ready();
}
else{
	jQuery.beautyOfCode.utils.loadCss(settings.baseUrl + settings.styles + 'shCore.css');
	jQuery.beautyOfCode.utils.loadCss(settings.baseUrl + settings.styles + 'shTheme' + settings.theme + '.css','shTheme');
	var scripts = new Array();
	scripts.push(settings.baseUrl + settings.scripts + 'shCore.js');
	jQuery.each(settings.brushes,function(i,item){
	scripts.push(settings.baseUrl + settings.scripts + 'shBrush' + item + ".js")}
);
	jQuery.beautyOfCode.utils.loadAllScripts( scripts,function(){
	if (settings && settings.config) jQuery.extend(SyntaxHighlighter.config,settings.config);
	if (settings && settings.defaults) jQuery.extend(SyntaxHighlighter.defaults,settings.defaults);
	settings.ready();
}
);
}
}
);
}
,beautifyAll:function(){
	jQuery("pre.code:has(code[class])").beautifyCode();
}
,utils:{
	loadScript:function(url,complete){
	jQuery.ajax({
	url:url,complete:function(){
	complete();
}
,type:'GET',dataType:'script',cache:true}
);
}
,loadAllScripts:function(urls,complete){
	if (!urls || urls.length == 0){
	complete();
	return;
}
var first = urls[0];
	jQuery.beautyOfCode.utils.loadScript( first,function(){
	jQuery.beautyOfCode.utils.loadAllScripts( urls.slice(1,urls.length),complete );
}
);
}
,loadCss:function(url,id){
	var headNode = jQuery("head")[0];
	if (url && headNode){
	var styleNode = document.createElement('link');
	styleNode.setAttribute('rel','stylesheet');
	styleNode.setAttribute('href',url);
	if (id) styleNode.id = id;
	headNode.appendChild(styleNode);
}
}
,addCss:function(css,id){
	var headNode = jQuery("head")[0];
	if (css && headNode){
	var styleNode = document.createElement('style');
	styleNode.setAttribute('type','text/css');
	if (id) styleNode.id = id;
	if (styleNode.styleSheet){
	// for IE styleNode.styleSheet.cssText = css;
}
else{
	$(styleNode).text(css);
}
headNode.appendChild(styleNode);
}
}
,addCssForBrush:function(brush,highlighter){
	if (brush.isCssInitialized) return;
	jQuery.beautyOfCode.utils.addCss(highlighter.Style);
	brush.isCssInitialized = true;
}
,parseParams:function(params){
	var trimmed = jQuery.map(params,jQuery.trim);
	var paramObject ={
}
;
	var getOptionValue = function(name,list){
	var regex = new RegExp('^' + name + '\\[([^\\]]+)\\]$','gi');
	var matches = null;
	for (var i = 0;
	i < list.length;
	i++) if ((matches = regex.exec(list[i])) != null) return matches[1];
	return null;
}
var handleValue = function(flag){
	var flagValue = getOptionValue('boc-' + flag,trimmed);
	if (flagValue) paramObject[flag] = flagValue;
}
;
	handleValue('class-name');
	handleValue('first-line');
	handleValue('tab-size');
	var highlight = getOptionValue('boc-highlight',trimmed);
	if (highlight) paramObject['highlight'] = jQuery.map(highlight.split(','),jQuery.trim);
	var handleFlag = function(flag){
	if (jQuery.inArray('boc-' + flag,trimmed) != -1) paramObject[flag] = true;
	else if (jQuery.inArray('boc-no-' + flag,trimmed) != -1) paramObject[flag] = false;
}
;
	handleFlag('smart-tabs');
	handleFlag('ruler');
	handleFlag('gutter');
	handleFlag('toolbar');
	handleFlag('collapse');
	handleFlag('auto-links');
	handleFlag('light');
	handleFlag('wrap-lines');
	handleFlag('html-script');
	return paramObject;
}
}
}
;
	jQuery.fn.beautifyCode = function(brush,params){
	var saveBrush = brush;
	var saveParams = params;
	// iterate all elements this.each(function(i,item){
	var $item = jQuery(item);
	// for now,only supports <pre><code>...</code></pre> // support for only pre,or only code could be added var $code = $item.children("code");
	var code = $code[0];
	var classItems = code.className.split(" ");
	var brush = saveBrush ? saveBrush:classItems[0];
	var elementParams = jQuery.beautyOfCode.utils.parseParams(classItems);
	var params = jQuery.extend({
}
,SyntaxHighlighter.defaults,saveParams,elementParams);
	// Instantiate a brush if (params['html-script'] == 'true'){
	highlighter = new SyntaxHighlighter.HtmlScript(brush);
}
else{
	var brush = SyntaxHighlighter.utils.findBrush(brush);
	if (brush) highlighter = new brush();
	else return;
}
// i'm not sure if this is still neccessary jQuery.beautyOfCode.utils.addCssForBrush(brush,highlighter);
	// IE Bug?:code in pre has to be skipped // in order to preserve line breaks. if ($item.is("pre") && ($code = $item.children("code"))) $item.text($code.text());
	highlighter.highlight($item.html(),params);
	highlighter.source = item;
	$item.replaceWith(highlighter.div);
}
);
}

CSS代码(reset.css):

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}
body{line-height:1;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
ul{list-style:none;list-style-type:none;}
li{list-style:none;list-style-type:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{background:transparent;border:0;display:block;font-size:100%;margin:0;padding:0;text-decoration:none;vertical-align:baseline;}
ins{background-color:rgb(255,255,153);color:rgb(0,0,0);text-decoration:none;}
mark{background-color:rgb(255,255,153);color:rgb(0,0,0);font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted rgb(193,193,193);cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{border:0;border-top:1px solid rgb(204,204,204);display:block;height:1px;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
input:focus,textarea:focus{/*border:none;*/
outline:none;}

CSS代码(style.css):

/*Create 3D Buttons with CSS & jQuery DEMOAuthor:Benjamin CharityURL:http://eyemilk.com*/
@font-face{font-family:'BebasNeueRegular';src:url('../fonts/bebasneue-webfont.eot');src:local('☺'),url('../fonts/bebasneue-webfont.woff') format('woff'),url('../fonts/bebasneue-webfont.ttf') format('truetype'),url('../fonts/bebasneue-webfont.svg#webfontSEszHvDl') format('svg');font-weight:normal;font-style:normal;}
html{background:rgb(150,150,150);background-attachment:fixed;background-image:-moz-radial-gradient(50% 0,circle farthest-corner,rgb(240,240,240) 0pt,rgb(130,130,130) 100%);background-image:-webkit-gradient(radial,50% 0,0,50% 0,700,from(rgb(240,240,240)),to(rgb(130,130,130)));font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
body{color:#333;font-size:20px;min-height:100%;text-shadow:0 1px 0 #fff,0 -1px 0 #000;text-transform:uppercase;}
#three-d{font-family:'BebasNeueRegular','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:700px;opacity:0.05;position:absolute;left:-23px;top:3px;text-shadow:0 1px 0 #fff,0 2px 0 #fff,0 3px 0 #fff,0 -1px 0 #000,0 -2px 0 #000,0 -3px 0 #000;z-index:1;}
#container{margin:0 auto;position:relative;width:700px;z-index:10;}
#container>header h1{font-size:80px;line-height:.9em;margin:25px 0 50px 0;}
#container article{border:5px dashed rgb(193,193,193);margin:15px 0;padding:10px 30px 20px;position:relative;}
#container article h1{margin:0 0 25px -20px;}
#container article#long{height:150px;}
#container footer{font-size:12px;line-height:1.2em;}
#container footer a:link,#container footer a:visited{color:rgb(66,66,66);}
/* END General styles */
/* BEGIN Toggle styles */
a.button{box-shadow:1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),3px -3px 0 rgb(241,91,38),4px -4px 0 rgb(241,91,38),0 0 10px rgba(0,0,0,0.6);-webkit-box-shadow:/* Safari,Chrome */
1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),3px -3px 0 rgb(241,91,38),4px -4px 0 rgb(241,91,38),0 0 10px rgba(0,0,0,0.6);-moz-box-shadow:/* Firefox */
1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),3px -3px 0 rgb(241,91,38),4px -4px 0 rgb(241,91,38),0 0 10px rgba(0,0,0,0.6);-o-box-shadow:/* Opera */
1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),3px -3px 0 rgb(241,91,38),4px -4px 0 rgb(241,91,38),0 0 10px rgba(0,0,0,0.6);color:rgb(193,193,193);display:block;font-size:12px;margin:0;text-align:center;text-transform:uppercase;}
a#tutorial-toggle{background:rgb(255,255,255);border-radius:25px;-webkit-border-radius:25px;/* Safari,Chrome */
-moz-border-radius:25px;/* Firefox */
-o-border-radius:25px;/* Opera */
height:30px;line-height:30px;width:30px;}
a.on{box-shadow:1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),0 0 6px rgba(0,0,0,0.6);-webkit-box-shadow:/* Safari,Chrome */
1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),0 0 6px rgba(0,0,0,0.6);-moz-box-shadow:/* Firefox */
1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),0 0 6px rgba(0,0,0,0.6);-o-box-shadow:/* Opera */
1px -1px 0 rgb(241,91,38),2px -2px 0 rgb(241,91,38),0 0 6px rgba(0,0,0,0.6);color:rgb(0,0,0);margin:-2px -2px 2px 2px;}
a.button:active,a.on:active{box-shadow:1px -1px 0 rgb(241,91,38),0 0 3px rgba(0,0,0,0.3);-webkit-box-shadow:/* Safari,Chrome */
1px -1px 0 rgb(241,91,38),0 0 3px rgba(0,0,0,0.3);-moz-box-shadow:/* Firefox */
1px -1px 0 rgb(241,91,38),0 0 3px rgba(0,0,0,0.3);-o-box-shadow:/* Opera */
1px -1px 0 rgb(241,91,38),0 0 3px rgba(0,0,0,0.3);margin:-3px -3px 3px 3px;}
a.dot{background:rgb(240,240,240);border-radius:4px;-webkit-border-radius:4px;/* Safari,Chrome */
-moz-border-radius:4px;/* Firefox */
-o-border-radius:4px;/* Opera */
display:none;padding:10px 20px 7px;position:absolute;right:20px;top:30%;}
/* Demo #2 */
a#long-toggle{background:rgb(193,193,193);border-radius:7px;-webkit-border-radius:7px;/* Safari,Chrome */
-moz-border-radius:7px;/* Firefox */
-o-border-radius:7px;/* Opera */
color:rgb(0,0,0);font-size:25px;padding:10px 10px 7px;}
a#long-toggle.on{color:rgb(191,77,52);}
a.dot2{background:rgb(255,255,255);border:3px solid rgb(66,66,66);border-radius:12px;-webkit-border-radius:12px;/* Safari,Chrome */
-moz-border-radius:12px;/* Firefox */
-o-border-radius:12px;/* Opera */
color:rgb(55,55,55);display:none;font-size:20px;padding:10px 20px 7px;position:absolute;bottom:25px;left:27%;}

CSS代码(tutorial.css):

/*Create 3D Buttons with CSS & jQuery DEMOAuthor:Benjamin CharityURL:http://eyemilk.com*/
@font-face{font-family:'BebasNeueRegular';src:url('../fonts/bebasneue-webfont.eot');src:local('☺'),url('../fonts/bebasneue-webfont.woff') format('woff'),url('../fonts/bebasneue-webfont.ttf') format('truetype'),url('../fonts/bebasneue-webfont.svg#webfontSEszHvDl') format('svg');font-weight:normal;font-style:normal;}
html{background:rgb(150,150,150);background-attachment:fixed;background-image:-moz-radial-gradient(50% 0,circle farthest-corner,rgb(240,240,240) 0pt,rgb(130,130,130) 100%);background-image:-webkit-gradient(radial,50% 0,0,50% 0,700,from(rgb(240,240,240)),to(rgb(130,130,130)));font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
body{color:#333;min-height:100%;}
#three-d{font-family:'BebasNeueRegular','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:700px;opacity:0.05;position:absolute;left:-23px;top:3px;text-shadow:0 1px 0 #fff,0 2px 0 #fff,0 3px 0 #fff,0 -1px 0 #000,0 -2px 0 #000,0 -3px 0 #000;z-index:1;}
#container{margin:0 auto;position:relative;width:700px;z-index:10;}
h1{font-size:80px;line-height:.9em;margin:25px 0 50px 0;text-shadow:0 1px 0 #fff,0 -1px 0 #000;text-transform:uppercase;}
h2{font-size:30px;line-height:.9em;margin:25px 0 10px 0;text-shadow:0 1px 0 #fff,0 -1px 0 #000;text-transform:uppercase;}
h3{border-bottom:2px dashed rgb(193,193,193);color:rgb(135,58,7);font-size:20px;font-style:italic;line-height:.9em;padding-bottom:5px;text-shadow:1px 1px 4px #fff;}
h4{color:black;font-size:20px;line-height:.9em;margin:25px 0 10px 0;}
p{font-size:18px;line-height:1.3em;margin:5px 0;}

附件:下载该文件资源,减少时间成本(增值服务)